As a newcomer to ReactJs, my task is to create a 5-star review component with the ability to display half-star ratings. I previously implemented this in Angular5.
Within the map method, I need to loop through the following elements:
<!-- full star -->
<input
id="'star'+num"
value="num-0.5"
name="rating"
type="radio" />
<label className="full"></label>
<!-- half star -->
<input
value="num-0.5"
id="'halfstar'+num"
name="rating"
type="radio" />
<label className="half"> </label>
An error occurs because it requires a wrapper div element. However, if we use a div, the CSS for the star review won't function properly. The initial example was taken from the link provided here:
https://codepen.io/jamesbarnett/pen/vlpkh
In Angular, this issue is resolved by using ng-container. You can see an example below:
Is there a solution to this problem in React?