[FIXED] how to pass data from one api call from one component to another

Issue

I'm making an application that shows me some data about the global temperature. I have a component that manages the call and one that receives the data. It works, but I can't use the data in the temperature component. How do I pass that 'res'?

import React from "react";

export const ClientAPi = async (url) => {
  try {
    const api = await fetch(url);
    const res = await api.json();
    console.log(res);
    return res;
  } catch (error) {}
};

import React from "react";
import Content from "./Content";
import DataPages from "./DataPages";
import { useQuery } from "@tanstack/react-query";
import fetchLinks from "./fetchLinks";
import { fetchData } from "./fetchData";
import Chart from "./Chart";
import { useEffect, useState } from "react";
import {ClientAPi} from "./ClientAPi";

function Temperature(props) {
     const [input, setInput] = useState([]);

   const getData = async () => {
     try {
    ClientAPi("https://global-warming.org/api/temperature-api")
   } catch (error) {}
   };

   useEffect(() => {
     getData();
   }, []);



  return (
    <div>
      <Content
        title={DataPages.temperature.title}
        subtitle={DataPages.temperature.subtitle}
        description={DataPages.temperature.description}
      ></Content>     
      <Chart data={input} /> 
    </div>
  );
}

export default Temperature;

the idea is to put data in input using useState and then pass it to the Chart component to show the graph

Solution

You can try this:

    const getData = async () => {
      try {
        const result = await ClientAPi(
          "https://global-warming.org/api/temperature-api"
        );
        setInput(result);
      } catch (error) {}
    };

    useEffect(() => {
      getData();
    }, []);

Answered By - Vasile Coman
Answer Checked By - - Pedro (ReactFix Volunteer)