CodeSandbox: https://codesandbox.io/s/distracted-taussig-n7e7q3?file=/src/App.js
Como puede ver, flaggers sobre la matriz de indicadores con .map y represento <div>true</div> o <div onClick={() => setToTrue(flag)}>false</div> . Supuse que si hacía clic en el segundo div, la propiedad de referencia de ese indicador se establecería en verdadero y el componente se volvería a representar, haciendo que el div cambiara a <div>true</div> pero eso no parece ser el caso.
En la función setToTrue, hago console.log en el objeto de publicación y puedo ver que la propiedad de referencia del segundo indicador ha cambiado a verdadero, pero no se muestra en la interfaz de usuario.
import "./styles.css"; export default function App() { const post = { flaggers: [ { refer: false }, { refer: false } ] } const setToTrue = (flag) => { flag.refer = true; console.log(post) } return ( <div className="App"> {post.flaggers.map((flag) => ( <div> {flag.refer ? <div>true</div> : <div onClick={() => setToTrue(flag)}>false</div>} </div> ))} </div> ); }Bueno, no es así como react , tiene que establecer el valor de Estado para activar el componente para que se vuelva a procesar, lo que provocará un cambio en la interfaz de usuario. Intente con el siguiente código, funcionará bien ya que establecí un valor en onClick que hace que el componente se vuelva a procesar en breve. Sugeriría leer la documentation antes de entrar en la codificación y saber react funciona.
export default function App() { const [post, setPost] = React.useState([ { refer: false, }, { refer: false, }, ]); const setToTrue = (boolFlag, index) => { const tempPost = [...post]; tempPost[index].refer = boolFlag; setPost(tempPost); }; return ( <div className='App'> {post.map((flag, index) => ( <div key={`${index}flag`}> {flag.refer ? <div onClick={() => setToTrue(false, index)}>true</div> : <div onClick={() => setToTrue(true, index)}>false</div>} </div> ))} </div> ); }