SINGLE ARRAY API CALL DECODE

 SINGLE ARRAY API CALL DECODE

import React, { useEffect, useState } from 'react'

import { Box, Button, Typography } from "@mui/material";

export default function ApiCaller() {

  const [data, setData] = useState([])

  useEffect(() => {

    console.log("hi");

    fetch('http://surevih.in/api/allbook')

      .then(response => {

        if (response.ok) {

          return response.json();

        } else {

          throw new Error('Network response was not ok.');

        }

      })

      .then(result => {

        var singledata = result['book'][0];

        setData(singledata);

      })

      .catch(error => {

        console.error('There was a problem with the fetch operation:', error);

      });

  }, [])

  const handlerApi = () => {

  }

  console.warn("Data : ", data);

  return (

    <Box>

      <Typography variant="h2" >Welcome</Typography>

      <Box style={{border: '2px solid black'}} textAlign='start' padding={5} >

        <Typography variant="h6" py={1}  >{data.id}</Typography>

        <Typography variant="h6" py={1} >{data.title}</Typography>

        <Typography variant="h6" py={1} >{data.price}</Typography>

        <Typography variant="h6" py={1} >{data.published}</Typography>

      </Box>

      <Button variant="contained" onClick={handlerApi}>Save</Button>

    </Box>

  );

}