React is warning me key prop must be unique yet I have provided a unique one-CodePudding

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.)

CodePudding user response：

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.

CodePudding user response：

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={uuidv4()}
                      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={uuidv4()}
                  id={`${type}-${value.toLowerCase()}`}
                  onChange={(e) => setStoreDays(e)}
                />

                <label htmlFor={`${type}-${value.toLowerCase()}`}>
                  {value}
                </label>
              </React.Fragment>
            ))}
</div>
</form>

CodePudding user response：

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>

CodePudding user response：

You can try to use value as key in your case and add <React.Fragment>.

<form>
      <div className="first-row-days">
        {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => (
          <React.Fragment key={value}>
            <input type="checkbox" value={value} />
            <label>{value}</label>
          </React.Fragment>
        ))}
      </div>

      <div className="second-row-days">
        {["FRIDAY", "SATURDAY", "SUNDAY"].map((value) => (
          <React.Fragment key={value}>
            <input type="checkbox" value={value} />
            <label>{value}</label>
          </React.Fragment>
        ))}
      </div>
    </form>