¿Puedo agregar un accesorio clave a un fragmento de React?

2 minutos de lectura

avatar de usuario
sdgfsdh

estoy generando un dl en reaccionar:

<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 key prop a un fragmento (<> </>).

¿Cómo se puede solucionar esto?


estoy usando reaccionar 16.12.0.

  • <React.Fragment key={'foo'}>. No utilice la sintaxis de acceso directo. Ver fragmentos clave

    – Dupocas

    18 de diciembre de 2019 a las 11:23


  • Solo una sugerencia, no use el índice como clave. Vea aquí por qué: reaccione usando el índice como clave para los elementos de la lista

    –Ashish Duklan

    19 de noviembre de 2020 a las 11:22


avatar de usuario
demkovych

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

avatar de usuario
mukesh bhati

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>

Para referencia

avatar de usuario
maqsood ahmed

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

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad