Estoy generando un dl en React:
<dl> { highlights.map(highlight => { const count = text.split(highlight).length - 1; return ( <> <dt key={`dt-${highlight.id}`}>{highlight}</dt> <dd key={`dd-${highlight.id}`}>{count}</dd> </> ); }) } </dl>Esto me da la advertencia:
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
Esto eliminará la advertencia, pero no genera el HTML que quiero:
<dl> { highlights.map(highlight => { const count = text.split(highlight).length - 1; return ( <div key={highlight.id}> <dt>{highlight}</dt> <dd>{count}</dd> </div> ); }) } </dl> Y no puedo agregar un apoyo key a un fragmento ( <> </> ).
¿Cómo se puede solucionar esto?
Estoy usando React 16.12.0 .
Para agregar una clave a un fragmento, debe usar la sintaxis completa de Fragment:
<React.Fragment key={your key}> ... </React.Fragment>Ver documentos aquí https://reactjs.org/docs/fragments.html#keyed-fragments
Sí, puede agregar una clave en el siguiente formulario Fragmento que no es posible en la versión más corta de Fragmentos (es decir, <></>)
<Fragment key={your key}></Fragment>También puede usar esta forma de asignar automáticamente la clave a su lista de componentes
React.Children.toArray(someData.map(data=><div>{data.name}</div>))