How can I render the react component once the axios request is completed, I am able to get the data but it shows null twice and then displays the data - Javascript

GurbeersinghSokhi
March 25, 2023
227 views
0 votes
2 Answers

import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";

export default function Events() {
  const [data, setdata] = useState(null);
  useEffect(() => {
    axios.get("https://app.ticketmaster.com/discovery/v2/events?apikey=AZAG8m4u5gq5HgkyYk0sdE9eAG32vGPT&locale=*")
    .then((res) => {
      setdata(res.data);
    })
    .catch((error) => {
      console.log("Error encountered", error);
    });
  });
//   console.log(data);
  return (
    <div className="App">
    {/* {data._embedded.events.map((e) => {
      <li>[{e}] {e.name}</li>;
    })} */}
    <h1>In Homepage</h1>
    
  );
}

I am getting null twice before displaying the actual data:

I am trying to get data from an API and displaying it using AXIOS, but the rest of code executes once before my AXIOS request is completed.

Answers

- PavanJadda
- March 25, 2023 at 2:08 am
- 0 votes
0
You need to use empty array in useEffect().
```
useEffect(()=>{
//axios request
},[]);
```
See https://react.dev/reference/react/useEffect#specifying-reactive-dependencies for more details on this
Login or Signup to reply.

- KevinVargas
- March 26, 2023 at 5:41 am
- 0 votes
0
First, you need to add an empty array to your useEffect to make it run just once.

And you can use the && operator to render the events when they are available, like this:
```
useEffect(()=>{
  // your axios code
}, []);  // <- add the empty array here

return (
  <div className="App">
    {data && data._embedded.events.map((e) => (
      <li key={e.id}>{e.name}</li>
    )}
  </div>
);
```
Login or Signup to reply.