Next and Previous item from api in modal ? React
Hi, I am making a call to an api that displays the fetched items on a table and when you click on a row, the clicked item gets displayed on modal along with its details, what I cant figure out is how to implement a button with an onlick function that lets me toggle between the next and previous post while I am in the modal, I would appreciate any nudge in the right direction as I cant really wrap my head around this one. Thanks in advance! I will post the code down below, if the code looks messed up, I can put up a codepen! const HomePage = () => { const [posts, setPosts] = useState([]); // const {impacters, setImpacters} = useState([]); const [modalInfo, setModalInfo] = useState([]); const [, /* showModal */ setShowModal] = useState(false); const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); const getPostData = async () => { try { const data = await axios.get('http://localhost:3001/posts'); setPosts(data.data); } catch (e) { console.log(e); } }; // const getImpacterData = async () => { // try { // const impacter_data = await axios.get('http://localhost:3001/impacters'); // setImpacters(impacter_data.data); // } catch (e) { // console.log(e); // } // }; // Posts useEffect(() => { getPostData(); }, []); // Impacters // useEffect(() => { // getImpacterData(); // }, []); const columns = [{dataField: 'description', text: 'Player Name'}]; // variable that is going to be responsible for grabbing our row data const rowEvents = { onClick: (e, row) => { console.log(row); // loggar den row i console setModalInfo(row); toggleTrueFalse(); }, }; const nextPost = () => {}; previousPost = () => {}; const toggleTrueFalse = () => { setShowModal(handleShow); }; const ModalContent = () => { return ( <Modal show={show} onHide={ha