import {
  Button,
  Dialog,
  Grid,

  Slide,
  Typography,
} from "@material-ui/core";
import React, { useContext, useEffect, useState } from "react";
import AddTicket from "./addTicket";
import useStyles from "./Style";
import { Link } from "react-router-dom";
import axios from "axios";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

function Support() {
  const [open, setOpen] = useState(false);
  const [AddTickets, setAddTickets] = useState(true);
  const [newTicket , setNewTicket] = useState("")
  // global
  // var layoutState = useLayoutState();

  
  /////////////////////////////////////////////////////////////////////////////////////////
  
  const axiosInstance = useAxiosPrivate()
  const token = localStorage.getItem("id_token")
  console.log("token",token);
  useEffect(() => {
    const fetchData = async () =>{

      try {
        const {data: response} = await axios.get("http://188.121.121.225/api/ticket/getUserTickets",{
          headers: {
            'token': `${token}` 
          },
        },);
        console.log( "show response" , response.data);
        setNewTicket(response.data )
      } catch (error) {
        console.error(error.message);
      }

    }
    fetchData();
  }, []);


  /////////////////////////////////////////////////////////////////////////////////////////




  const classes = useStyles();



  return (
    <Grid container >


      //I get newTicket correctly
      {console.log("I get newTicket correctly",newTicket)}


      //but I get an error for next line
       {newTicket.map((element) => {
        return (
            <div>{element?.title}</div>
        );
      })} 






    </Grid>
  );
}

export default Support;

I get newTicket correctly via

{console.log("I get newTicket correctly",newTicket)}

but when I use map function for newTicket that I get data from API with Axios, I get an error: newTicket.map is not a function

  {newTicket.map((element) => {
    return (
        <div>{element?.title}</div>
    );

  })} 

[![my console][1]][1]

This is the console I get for newTicket why I get this error? and What can I do? thank you guys

I am attaching a photo of the console [1]: https://i.stack.imgur.com/MztxW.jpg

CodePudding user response：

Try initialising the state with an empty array

  const [newTicket , setNewTicket] = useState([])

Then, make sure you save the response data into an array and then save into state as a copy of the array.

const axiosInstance = useAxiosPrivate();
const token = localStorage.getItem("id_token");
console.log("token", token);
useEffect(() => {
    const fetchData = async () => {
        try {
            const { data: response } = await axios.get(
                "http://188.121.121.225/api/ticket/getUserTickets",
                {
                    headers: {
                        token: `${token}`,
                    },
                }
            );
            console.log("show response", response.data);

            // used to store the response data and then save into state
            let tempTicketArray = [];
            tempTicketArray.push(response.data);

            setNewTicket([...tempTicketArray]);
        } catch (error) {
            console.error(error.message);
        }
    };
    fetchData();
}, []);

CodePudding user response：

Make the initial value of newTicket to empty array instead of empty string like:

const [newTicket , setNewTicket] = useState([]);