¿Por qué mi useState setSelected no acepta los datos de la función .map? Tengo el siguiente código de reacción js:
const [ selected, setSelected ] = useState(null) const sectionItems = [ { id: "1", title: "title1", description: "description1" }, { id: "2", title: "title2", description: "description2" }, { id: "3", title: "title3", description: "description3" }, ]Estoy mapeando a través de la sección Elementos y representando un modal, en función de si la selección tiene un elemento o no:
{sectionItems.map((section, index) => { return ( <div key={section.id} className="processSection1" onClick={setSelected(section) > <div className="processTitle" >{section.title}</div> </div> ) })} {selected ? <Modal title={selected.title} description={selected.description} /> : " "}Problema: ¿Por qué no puedo pasar los datos a setSelected? O la pregunta más precisa es, ¿cómo puedo representar el modal con cada elemento de sección? También recibo este error: Demasiadas re-renderizaciones. React limita el número de renderizaciones para evitar un bucle infinito.
tienes que usar onClick así
onClick={()=>setSelected(section)}Si desea agregar un valor a una función, debe usar una función en línea dentro de onClick. En este momento, está activando la función para cada renderizado en el momento del renderizado.
Cambio:
onClick={setSelected(section)}a:
onClick={() => setSelected(section)}