Estoy buscando volver a renderizar una parte específica de este componente (dentro del .map de mi JSX), según el valor de mi optionObject que esté configurado como verdadero.
Cualquier idea sobre dónde me estoy equivocando sería muy apreciada, todavía un poco nuevo en React/componentes funcionales.
const [optionObject, setOptionObject] = useState( { 'one' : false, 'two' : false, 'three' : true, } ) function switchOption(selectedOption) { var objectCopy = optionObject; for (const [key, value] of Object.entries(objectCopy)) { if (key !== selectedOption) { objectCopy[key] = false; } else { objectCopy[key] = true; } } setOptionObject(objectCopy); } return ( <> <div className={styles.browseOptions}> <div onClick={()=>switchOption(1)} className={`${styles.option} ${optionObject['one'] ? styles.active : ''}`}><h3>One</h3></div> <div onClick={()=>switchOption(2)} className={`${styles.option} ${optionObject['two'] ? styles.active : ''}`}><h3>Two</h3></div> <div onClick={()=>switchOption(3)} className={`${styles.option} ${optionObject['three] ? styles.active : ''}`}><h3>Three</h3></div> {multi_grid_tiles_data?.map((grid, i) => { if (optionObject[grid['parent']['name']]) return ( <div key={"gridList-"+i}> <GridList grid_data={grid_data}/> </div> ); })} </> );cambio
var objectCopy = optionObject;a
var objectCopy = {...optionObject};Como el primero no copia un objeto, solo apunta a la referencia del objeto existente, por lo tanto, es el mismo objeto. Este último crea una nueva referencia de objeto y extiende los contenidos antiguos en él.
Para que su componente se vuelva a representar en función de los objetos que se actualizan en estado, tiene que ser una nueva referencia de objeto. (lo mismo para matrices)