Obtuve una variedad de artículos de noticias de una API que se encuentra en el estado de artículos de noticias.

Mapeo el estado y deconstruyo los datos que necesito. Luego paso los accesorios de título y descripción a la tarjeta. Luego tengo un modal que está oculto usando CSS y le paso el título y el contenido al modal.

Mi problema es que cuando abro el modal, no se muestran el título y el contenido correctos. Independientemente del artículo en el que haga clic, cuando abro el modal, solo muestra el título y el contenido del último artículo de la matriz. Debería mostrar el título y el contenido correctos de la tarjeta en la que se ha hecho clic.

¿Por qué está pasando esto? Mi código está abajo. Gracias.

 import React, { useState } from 'react'; import { useNewsContext } from '../context/news-context'; const NewsCard = () => { const { newsArticles, isLoading } = useNewsContext(); const [isModalOpen, setIsModalOpen] = useState(false); const readMore = () => { setIsModalOpen(true); }; const closeBtn = () => { setIsModalOpen(false); }; return ( <section className='news-section wrapper'> {' '} {newsArticles.map((item, index) => { const { title, description, urlToImage, content } = item; return ( <div key={index} className='news-card'> <img className='news-image' src={urlToImage} alt={title} /> <h1> {title} </h1>{' '} <p> {description} </p>{' '} <button type='button' onClick={readMore}> {' '} Read More{' '} </button>{' '} <div className={isModalOpen ? 'news-modal' : 'news-modal news-modal__hidden'}> <div className='news-modal__card'> <h1> {title} </h1> <p> {content} </p>{' '} <button type='button' onClick={closeBtn}> {' '} Close{' '} </button> </div>{' '} </div>{' '} </div> ); })}{' '} </section> ); }; export default NewsCard;