Next and Previous item from api in modal ? React | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

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

12th Feb 2021, 6:27 PM
rashidk
rashidk - avatar
2 Answers
0
rashk your code on this question is transcated, we can't read the code fully. Could you post the code on Code playground, Nodejs? https://code.sololearn.com/c08SC1FM77iw/?ref=app
13th Feb 2021, 3:45 AM
Calviղ
Calviղ - avatar
0
rashk here you go, A table with modal that can navigate with previous/next posts https://code.sololearn.com/WH3OaLndEOCE/?ref=app
15th Feb 2021, 9:59 AM
Calviղ
Calviղ - avatar