Probablemente me estoy perdiendo algo realmente simple, pero:
tengo una matriz:
const [weight, setWeight] = useState([]);Y quiero mapearlo para renderizar dinámicamente un componente:
const renderWeight = () => { weight.map((e) => { <Weight />; }); };Quiero que esto suceda cuando hago clic en un botón de enviar y quiero que los componentes se representen en un div específico. No puedo encontrar una manera de hacer esto.
¡Gracias!
Creo que necesitas devolver la matriz mapeada
const renderWeight = () => { return weight.map((e) => { <Weight />; }); };nota: asegúrese de asignar una clave a cada componente renderizado
Puede usar una variable de mostrar como alternador para mostrar/ocultar el componente de peso como este
import React, { useState } from "react"; const App = () => { const [weight, setWeight] = useState([1, 2, 3]); const [show, setShow] = useState(false); return ( <div className="container"> <div className="weight">{show && weight.map((e) => <Weight />)}</div> <button onClick={() => setShow(!show)}>Click to show/hide</button> </div> ); }; export default App;Tienes que devolverlo.
const [show ,setShow] = useState(false) const renderWeight = () => { return weight.map((e) => { return <Weight />; }); }; return ( <> <button onClick={() => setShow(!show)}>Click to show/hide</button> { show? renderWeight():'' } </>);