Tengo un componente principal que tiene dos componentes secundarios y seis de cada uno.
Algo como esto:
<Main> <Component1 /> <Component1 /> <Component1 /> <Component1 /> <Component1 /> <Component1 /> <Component2 /> <Component2 /> <Component2 /> <Component2 /> <Component2 /> <Component2 /> </Main>Mi objetivo es poder renderizar un Component2 específico basado en un cambio del Componente 1.
Entonces, hacer clic en el primer Componente1 alternaría el renderizado del primer Componente2
He intentado algo como esto en mi componente principal:
const [component2Visible, setcomponent2Visible] = useState([false, true, false, false, false, false])Pero no creo que esta sea la dirección correcta en absoluto.
Aquí hay un enfoque que podría emplear:
// state variables to hold arguments to generate Component1 & Component2 // Component1 args have a prop named 'hideC2' (initially set to false) const [comp1Args, setComp1Args] = useState([{hideC2: false, ...}, {hideC2: false, ....}, {}]); const [comp2Args, setComp2Args] = useState([{}, {}, {}]); . . . // Iterate over the two args arrays to generate Components // Use '.filter' on comp2Args to 'hide' those where 'hideC2' is set to true return ( <Main> { comp1Args.map((args, idx) => ( <Component1 key={idx} args={args} onToggleC2={() => setComp1Args(prev => { const curr = [...prev]; curr[idx].hideC2 = !prev[idx].hideC2; return [...curr] })} /> )) } { comp2Args .filter((el, idx) => (comp1Args[idx].hideC2 !== true)) .map((args, idx) => ( <Component2 key={idx} args={args}/> )) } </Main> );