Estoy trabajando en mi blog y estoy tratando de implementar Sanity. Pude hacer que mis publicaciones aparecieran con el objeto json devuelto de la consulta con useState. Estoy tratando de completar mi React-Modal con los contenidos correctos según la publicación en la que hice clic con su _id o algún tipo de clave. Simplifiqué el código para que no fuera demasiado largo:
export default function News() { // Json objects stored in posts const [posts, setPosts] = useState([]); // Used to toggle Modal on and off const [isOpen, setIsOpen] = useState(false); function toggleModal() { setIsOpen(!isOpen); } return ( <> {posts.map((posts) => ( <div key={posts._id}> <h3 className="title" onClick={toggleModal}> {posts.title} </h3> <div"> <a> <span onClick={toggleModal}>Read More</span> </a> </div> // Clicking on either span or a tag shows the Modal <Modal isOpen={isOpen} onRequestClose={toggleModal}> // Closes modal <button className="close-modal" onClick={toggleModal}> <img src="assets/img/svg/cancel.svg" alt="close icon"/> </button> // Want to show content based on _id <h3 className="title">{posts.title}</h3> <p className="body">{posts.body}</p> </div> ) </> ) }Cada vez que hago clic en una determinada publicación, siempre cambia al primer objeto. Haga clic para ver la demostración gif
Editar: pude hacerlo funcionar según la respuesta dada
const [state, setState] = useState({ isOpen: false, postId: null }); const openModal = React.useCallback( (_key) => () => { setState({ isOpen: true, postId: _key }); }, [] ); function closeModal() { setState({ isOpen: false, postId: null }); }Y con la etiqueta Modal agregué
key={post.id == state.postId}Ahora todos los divs y etiquetas que representan el contenido correcto. Sin embargo , me enfrento a un pequeño problema. Si hago clic en la publicación [2] y muestra el contenido de la publicación [0] y en un abrir y cerrar de ojos cambia al contenido correcto. Luego, cuando hago clic en la publicación 1 , muestra y publica el contenido [2] y cambia al correcto. Sigue renderizando la publicación anterior. Todo está en un abrir y cerrar de ojos, pero aún visible.
Puedo sugerir usar ganchos de reacción para resolver su problema.
Puede pasar una función para usar el retorno de Callback, luego puede llamar a su función normalmente en el renderizado pasándole parámetros.
Ver más: https://reactjs.org/docs/hooks-reference.html#usecallback
import * as React from 'react'; export default function News() { // Json objects stored in posts const [posts, setPosts] = useState([]); // Used to toggle Modal on and off const [isOpen, setIsOpen] = useState(false); // React.useCallback. const toggleModal = React.useCallback((id) => () => { setIsOpen(!isOpen); console.log(`Post id: ${id}`); }, []); return ( <> {posts.map((post) => ( <div key={post._id}> <h3 className="title" onClick={toggleModal(post._id)}> {post.title} </h3> <div"> <a> <span onClick={toggleModal(post._id)}>Read More</span> </a> </div> // Clicking on either span or a tag shows the Modal <Modal isOpen={isOpen} onRequestClose={toggleModal(post._id)}> // Closes modal <button className="close-modal" onClick={toggleModal(post._id)}> <img src="assets/img/svg/cancel.svg" alt="close icon"/> </button> // Want to show content based on _id <h3 className="title">{post.title}</h3> <p className="body">{post.body}</p> </div> ) </> ) }