how to set data in React with axios?

user_17343167 0
Viewed 405

How should one show name and id within the <h1> tag. this project gets its data via axios from an API.

import React, { useState } from "react";
import axios from "axios";

const Details = () => {

  const [data, setData] = useState({
    name: "",
    id: "",
  });

  const apiDetails = () => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/${"ethereum"}`)
      .then((response) => {
        // console.log(response);
        setData({
          name: response.data.name,
          id: response.data.id,
        });
        return setData;
      });
  };

  return (
    <div>
      <h1>{setData.name}</h1>
      <h1>{data.name}</h1>
      <h1>{setData.id}</h1>
      <h1>{data.id}</h1>
      <h1>{setData.name}</h1>
    </div>
  );
};

export default Details;
axios react-bootstrap reactjs ajax javascript
1 Answers

You should use a useEffect as so, you can learn more about this hook here

import React, { useState, useEffect } from "react";
import axios from "axios";

const Details = () => {

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

  const apiDetails = () => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/${"ethereum"}`)
      .then((response) => {
        // console.log(response);
        //setData({
        //  name: response.data.name,
        //  id: response.data.id,
        // });
        return response;
      });
  };

 useEffect(() => {  
  (async () => {
   const response = await apiDetails(); 
   setData({
      name: response.data.name,
      id: response.data.id,
    });
  })();
 }, [])

  if (data) {
   return (
      <>  
       <h1>{data.name}</h1>
       <h1>{data.id}</h1>
      </>     
   );
  }  

  return null;  
};

export default Details;
user_21882750
Related