Tengo una función comunitaria en mi aplicación en la que los usuarios pueden publicar sus comentarios. Quiero alternar el estado de visibilidad de un comentario cuando se hace clic en un icono en particular. Icono:
<i className="fa-solid fa-message" onClick={(e)=>handleComment(e)}></i> {!props.post.isCommentVisible && <> <Container maxW="md" centerContent p={8}> {props.post.comment.map((comm) => ( <Text>{comm}</Text> ))}La función para alternar la visibilidad de un comentario es:
function handleComment(e) { const id=props.post.id; posts.map((post)=>{ if(post.id==id) { if(post.isCommentVisible=="false") { post.isCommentVisible="true"; } else { post.isCommentVisible="false"; } db.collection("posts").doc(id).set(post); } }) }Curiosamente, el estado de visibilidad del comentario se actualiza, pero la reacción no vuelve a mostrar el estado modificado.
Ya sea que props.post.isCommentVisible sea "true" o "false" , la expresión !props.post.isCommentVisible siempre será false porque "anyString" siempre es verdadero.
Suponiendo que en algún lugar definiste:
const [posts, setPosts] = useState([]); Y luego actualizó las posts pobladas a través de alguna operación de búsqueda, debe llamar a setPosts como:
setPosts( posts.map((x) => ({ ...x, isCommentVisible: x.id === post.id ? !x.isCommentVisible : x.isCommentVisible, })) );(use cualquier método que desee para lograr el resultado, tenga en cuenta el comentario de Rocky Sims)
Esto hará que se vuelva a renderizar.