'How can I get Api data in a Component and use the data I get in another?

This is where I would like to "stock" my API data. It's a component named api.js

import axios from "axios";

function Api() {

    const options = {
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users',
    };
    
    axios.request(options).then(function (response) {
        console.log(response.data)
    }).catch(function (error) {
        console.error(error);
    });

}

export default Api

Here is where I would like to use the data from it and build my component. It's a component named component.js and it's located inside a folder named components.

import Api from "../api";

function Component() {
  
  return (
    <div>

    </div>

  )
}

export default Component


Solution 1:[1]

If your objective with the API component is to only have helper functions to retrieve data from certain endpoints, the best thing would be to construct a helper JS file with these functions, and call these functions from the components that need the data. If you need to store this data in a state accessible by several components, you might want to look at tools like Redux.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jonas Castanheira