0

Seems simple but I am bit confused in maping this api data, I am using NextJS (React framework) the response is complicated enough to map it , probably you guys can , find the image below :

enter image description here

just to be sure

Data.js

import axios from 'axios'; import React, { useState } from 'react'; axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'; axios.defaults.xsrfCookieName = 'csrftoken'; export async function getStaticProps() { const res = axios({ url: 'http://127.0.0.1:8000/graphql/', method: 'post', data: { query: ` query{ allBooks{ id title body } } `, }, xsrfHeaderName: 'X-CSRFToken', }); const data = (await res).data; return { props: { ninja: data }, revalidate: 1, // will be passed to the page component as props }; } const data = ({ ninja }) => { const [data, setdata] = useState([ninja]); console.log(data); // const map = data.map((ninja) => { return ( <div> <h1 id='data_h1'>{ninja}</h1> </div> ); }); return ( <div> <form action=''> <input type='text' /> <button type='submit'>Submit</button> </form> </div> ); }; export default data;
Improve this question

1 Answer 1

Reset to default
2

Try something like below:-

 return ( <> {data.map(inner => ( <> {inner.data?.allBooks?.map(books => ( <> <div>{book.id}</div> <div>{book.title}</div> <div>{book.body}</div> </> ))} </> ))} <div> <form action=""> <input type="text" /> <button type="submit">Submit</button> </form> </div> </> );
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

worked, it would be nice if you say the logic behind it
First we need to loop through data array and then we need to loop through allBooks which we can access via inner.data.allBooks