How to map this api response and display in HTML - ReactJS - NextJS

Question

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 :

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;

Answer 1

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>
    </>
  );