Conozco el accesorio clave, así que lo hice en el componente listitem
const ListItem = ({item}) => { const {result, time, id} = item; return( <li key={id} className='list__item'> <span className='item__result'>{result} cps</span> <span className='item__date'>{time}</span> <button className='item__delete'>delete</button> </li> )}Y aquí está el componente, donde lo uso.
const Leadboard = () => { const [data, setData] = useState([{result:'5,63', time:'08.06.2022', id: (new Date()).toString(16)}, {result:'5,63', time:'08.06.2022', id: +(new Date() - 1)}, {result:'5,63', time:'08.06.2022', id: +(new Date() - 2)}]); let elements=data.map(item => { return ( <> <ListItem item={item} /> </> ) }); return( <div className='app-leadboard'> <span className='app-leadboard__title'>Your's best results:</span> <ol className='app-leadboard__list' type='1'> {elements} </ol> </div> )}Pero después de renderizar sigo viendo el error "accesorio clave"
Pasé mucho tiempo en esto, pero no puedo entender qué está mal. Así que smb, ayuda por favor con eso
Tienes la lista equivocada. Son los componentes <ListItem> los que necesitan la clave. (Y puedes deshacerte de los fragmentos de reacción a su alrededor porque no tienen sentido).
React primero accede al corchete vacío ( <> </> ) antes de acceder al atributo key en su componente secundario.
Así que necesitas
key . // Use React.Fragment let elements=data.map(item => { return ( <React.Fragment key={item.id}> <ListItem item={item} /> </React.Fragment> ) }); y elimine la clave en el componente secundario ( ListItem )
ListItem.js <li /* Remove this key={id} */ className='list__item'>O
Deshágase de los corchetes vacíos ( <> </> ) y haga referencia directamente al componente secundario.
let elements=data.map(item => { return (<ListItem item={item} />) }); y deje el atributo key en el componente secundario
Más sobre Reaccionar Fragmento. Documentos oficiales de React