Hola a todos, tengo el siguiente código .
Componente Test.js
const Test = ({ infoText }) => { return ( <div> Some Text {infoText && <p>{infoText}</p>} </div> ); }; export default Test;Componente App.js
export default function App() { return ( <div className="App"> <Test infoText={[ <p className="someStyles">"Looking to lease multiple devices?"</p>, <div className="someOtherStyles"> <b>Get in contact with our specialist.</b> </div>, ]} /> </div> ); } Cuando renderizo mi componente de Test en el archivo App.js , recibo errores como
Warning: Each child in a list should have a unique "key" prop.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
Sé que viene de esta sintaxis que escribí.
infoText={[ <p className="someStyles">"Looking to lease multiple devices?"</>, <div className="someOtherStyles"> <b>Get in contact with our specialist.</b> </div>, ]} Necesito escribir de esta manera porque mi componente Test es un componente reutilizable y estoy usando su prop de infoText para pasar varias etiquetas con clases específicas.
Por cierto, el código funciona. Pero es muy feo que tenga tantos errores en la consola. Por favor ayúdame a arreglar esto.
Esta advertencia se genera porque, por lo general, cuando un elemento de reacción es una matriz , esa matriz se genera dinámicamente y, por lo tanto, podría cambiar. En este escenario, es absolutamente necesario que los elementos de su lista tengan una clave única para evitar un comportamiento inesperado de React.
En este escenario, está absolutamente bien ignorar las advertencias, porque su matriz está codificada y nunca va a cambiar. Si no desea ver estas advertencias, puede cambiar la matriz para que sea un fragmento de reacción, como este:
const Test = ({ infoText }) => { return ( <div> Some Text {infoText && <p>{infoText}</p>} </div> ); }; <Test infoText={ <> <p className="someStyles">"Looking to lease multiple devices?"</p> <div className="someOtherStyles"> <b>Get in contact with our specialist.</b> </div> </> } /> Una forma más idiomática de lograr lo mismo podría ser hacer que su componente Test represente a sus hijos, así:
const Test = ({ children }) => { return ( <div> Some Text <p>{children}</p> </div> ); }; <Test> <p className="someStyles">"Looking to lease multiple devices?"</p> <div className="someOtherStyles"> <b>Get in contact with our specialist.</b> </div> </Test>