0
220
Views¿Cómo encontrar una buena clave para mi función de mapa?
Me está costando mucho encontrar una clave, me da un error y no puedo descifrarlo. Intenté dar la identificación única al div con el artista de la clase. Así es como se ve un objeto de datos que se muestra:
{ id: 1, title: "Hypervenom Phinish 'Volt'", price: "200", SizinginNumbers: true, img: "https://image.goat.com/transform/v1/attachments/product_template_pictures/images/013/255/557/original/749901_703.png.png?action=crop&width=950", color: "#cfeb30", size: null, itemcolor: null, catagory: "soccer", quantity:1 },aquí es donde se mapean los datos, el carrito es un estado que estoy usando para almacenar los datos.
<div className="cart"> <h1>your Cart </h1> <h3>you have :{cart.length} item(s) </h3> { cart.map((item) => { return ( <> <ul className="cartlist" style={{backgroundColor:item.color}}> <li className="cartitem">x</li> <li className="cartitem"> <img className="cartimgs" src={item.img} alt="" /> </li> <li className="cartitem">{item.title}</li> <li className="cartitem">Size: {item.size}</li> <li className="cartitem">price: ${item.price}</li> <button className="quantitybtn">-</button> <span>{item.quantity}</span> <button className="quantitybtn">+</button> </ul> </> ); })} </div> aquí está el error que obtengo: 
·
Juan Pablo Isaza
2 answers
Answer question0
Es muy simple, simplemente elimine el fragmento de reacción y agregue la clave al elemento ul. Si no tiene una identificación única, la función de mapa tiene un índice en el segundo parámetro.
<div className="cart"> <h1>your Cart </h1> <h3>you have :{cart.length} item(s) </h3> { cart.map((item, index) => { return ( <ul key={index} className="cartlist" style={{backgroundColor:item.color}}> <li className="cartitem">x</li> <li className="cartitem"> <img className="cartimgs" src={item.img} alt="" /> </li> <li className="cartitem">{item.title}</li> <li className="cartitem">Size: {item.size}</li> <li className="cartitem">price: ${item.price}</li> <button className="quantitybtn">-</button> <span>{item.quantity}</span> <button className="quantitybtn">+</button> </ul> ); })} </div>
·
Juan Pablo Isaza
Report
0
Simplemente agregue un accesorio clave a su componente (HTML), <></> no admita la clave ni ningún otro atributo como accesorio, así que use React.fragment
<div className="cart"> <h1>your Cart </h1> <h3>you have :{cart.length} item(s) </h3> { cart.map((item) => { return ( <React.fragment key={index}> <ul className="cartlist" style={{backgroundColor:item.color}}> <li className="cartitem">x</li> <li className="cartitem"> <img className="cartimgs" src={item.img} alt="" /> </li> <li className="cartitem">{item.title}</li> <li className="cartitem">Size: {item.size}</li> <li className="cartitem">price: ${item.price}</li> <button className="quantitybtn">-</button> <span>{item.quantity}</span> <button className="quantitybtn">+</button> </ul> </React.fragment> ); })} </div>
·
Juan Pablo Isaza
Report
Answer question