Estoy tratando de mapear también funciones del objeto.
const KindOfShoots = [ { id: 1, name: "Shoot in Studio", link: "/Photoshoot",icon:"fa fa-calendar", onClickAction: "setToggle1" }, { id: 2, name: "Shoot at other Location", link: "/Photoshoot" ,icon:"fa fa-calendar", onClickAction: "setToggle2" },];fragmentos a continuación:
{ KindOfShoots.map((type)=>( <KindOfShootLayout > <div className="KindOfShootLayout" onClick={() => {type.onClickAction}((t) => !t) }> {type.name} <i className={type.icon}></i> </div> </KindOfShootLayout> )) }Necesito cambiar los estados toggle1 & toggle2 y también almacenar los estados y pasarlos a otro componente, estoy un poco bloqueado
const [toggle1, setToggle1] = useState(true); const [toggle2, setToggle2] = useState(true);const KindOfShoots = [ { id: 1, name: "Shoot in Studio", link: "/Photoshoot",icon:"fa fa-calendar", onClickAction: setToggle1 }, { id: 2, name: "Shoot at other Location", link: "/Photoshoot" ,icon:"fa fa-calendar", onClickAction: setToggle2 },]; { KindOfShoots.map((type)=>( <KindOfShootLayout > <div className="KindOfShootLayout" onClick={() => type.onClickAction(!toogle)}> {type.name} <i className={type.icon}></i> </div> </KindOfShootLayout> )) }Ok, creo que encontré una respuesta; Usé la propiedad onToggle
const KindOfShoots = [ { id: 1, name: "Shoot in Studio", link: "/Photoshoot", icon: "fa fa-calendar", onToggle: setToggle1, toggle: toggle1, }, { id: 2, name: "Shoot at other Location", onToggle: setToggle2, toggle: toggle2, link: "/Photoshoot", icon: "fa fa-calendar", },];
y vuelve
{KindOfShoots.map((type) => ( <KindOfShootLayout> <div style={{display: toggleActual}} className="KindOfShootLayout" onClick={() => type.onToggle(!type.toggle)} > {type.name} <i className={type.icon}></i> </div> </KindOfShootLayout> ))} <div style={{ display: toggle1 ? "none" : "block" }}> <ThirdGrandchild /> </div> <div style={{ display: toggle2 ? "none" : "block" }}> <SecondGrandchild /> </div>