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> Estoy usando uuidv4 para la clave única del campo de entrada, incluso lo verifiqué pasando el índice de matriz como un accesorio único, pero recibo la misma advertencia al reaccionar. Una pregunta similar en StackOverflow sugiere usar la clave en la etiqueta JSX más externa, así que coloqué la clave en <React.Fragment key={uuid()}> pero nuevamente obtengo el mismo error ( Advertencia: cada niño en una lista debe tener un accesorio "clave" único. )
Después de mapear, establezca todos los elementos secundarios en 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>No has asignado clave a los Fragments
{["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => ( <Fragment key={value}> // ADD KEY HERE <input/> <label></label> </Fragment> ))}Asegúrate de hacer esto para todos los fragmentos.
El problema es la etiqueta del fragmento React <></>. Modifique el fragmento abreviado a <React.Fragment></React.Fragment> con la propiedad clave (asigne un valor único). El problema se resolverá.
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>