import { v4 as uuidv4 } from "uuid";
<form>
<div className="first-row-days">
{["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => (
<>
<input
type="checkbox"
value={value}
key={uuidv4()}
id={`${type}-${value.toLowerCase()}`}
onChange={(e) => setStoreDays(e)}
/>
<label htmlFor={`${type}-${value.toLowerCase()}`}>
{value}
</label>
</>
))}
</div>
<div className="second-row-days">
{["FRIDAY", "SATURDAY", "SUNDAY"].map((value) => (
<>
<input
type="checkbox"
value={value}
key={uuidv4()}
id={`${type}-${value.toLowerCase()}`}
onChange={(e) => setStoreDays(e)}
/>
<label htmlFor={`${type}-${value.toLowerCase()}`}>
{value}
</label>
</>
))}
</div>
</form>
I am using uuidv4 for the input field unique key, I have even checked by passing the array index as a unique prop but I am getting the same warning by react. A similar question on StackOverflow suggests using the key on the outermost JSX tag, so I placed the key in <React.Fragment key={uuid()}> but again I get the same error(Warning: Each child in a list should have a unique "key" prop.)
After mapping set all children elements in div
<div className="second-row-days">
{["FRIDAY", "SATURDAY", "SUNDAY"].map((value,index) => (
<div key={uuidv4()}>
<input
type="checkbox"
value={value}
id={`${type}-${value.toLowerCase()}`}
onChange={(e) => setStoreDays(e)}
/>
<label
htmlFor={`${type}-${value.toLowerCase()}`}>
{value}
</label>
</div>
))}
</div>
You have not assigned key to the Fragments
{["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => (
<Fragment key={value}> // ADD KEY HERE
<input/>
<label></label>
</Fragment>
))}
Make sure you do this for all the fragments.
The problem is React fragment tag <></>. Modify to shorthand fragment to <React.Fragment></React.Fragment> with key property (assign unique value).The issue will be resolve.
import { v4 as uuidv4 } from "uuid";
<form>
<div className="first-row-days">
{["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value, index) => (
<React.Fragment key={"iterate-1-" + index}>
<input
type="checkbox"
value={value}
key={"first-row-days-" + index}
id={`${type}-${value.toLowerCase()}`}
onChange={(e) => setStoreDays(e)}
/>
<label htmlFor={`${type}-${value.toLowerCase()}`}>
{value}
</label>
</React.Fragment>
))}
</div>
<div className="second-row-days">
{["FRIDAY", "SATURDAY", "SUNDAY"].map((value, index) => (
<React.Fragment key={"iterate-2-" + index}>
<input
type="checkbox"
value={value}
key={"second-row-days-" + index}
id={`${type}-${value.toLowerCase()}`}
onChange={(e) => setStoreDays(e)}
/>
<label htmlFor={`${type}-${value.toLowerCase()}`}>
{value}
</label>
</React.Fragment>
))}
</div>
</form>