0

As the title says, I have fetched data from API on a component. I want that component to just act like a "store" for the fetched data, meanwhile, rendering those data on to another component. How do I do that if that's possible?

This is Fetch.js which is supposed to get data from the API and store it in person of state. Now I want to break the object stored in person and separate into different var like for fname, lname, etc.

import React from "react";
export default class Fetch extends React.Component {
state = {
loading: true,
person: null,
 };

async componentDidMount() {
console.log("mounted");

const url = "https://api.randomuser.me/";
const response = await fetch(url);
const data = await response.json();
this.setState({
  loading: null,
  person: data.results[0],
});
}

render() {
return console.log(this.state.fname);
 }
}

Now that everything said above is done, I have another file Main.js where I want to display the fetched data (broken into each variable like fname,lname) from Fetch.js.

import React from "react";
export default class Main extends React.Component {
render() {
return (
  <div>
    {this.state.loading || !this.state.person ? (
      <div>Loading</div>
    ) : (
      <div>
        Name: {this.state.fname} {this.state.lname}
      </div>
    )}
  </div>
       );
      }
     }
Binayak Karki
  • 26
  • 3

1 Answers1

1

You can pass that data in properties from a parent component to children:

function ParentComponent() {
  const data = fetch(...);

  return <ChildComponent data={data} />
}
...
function ChildComponent(props) {
  const data = props.data;

  ...
}

But if you might need that data in many components (or there are a bunch of layers to the child component) it would be way more convenient to use React's Context for this purpose: https://uk.reactjs.org/docs/context.html

Sidorina
  • 56
  • 1
  • 7
  • I mean sharing the data in two different components in two different files. For example: I have a file `Fetch.js` where I have fetched data of a person (say) using an API. Now, I want a state to store the data in `Fetch.js` itself but render the data from state of `Fetch.data` in a different component of a separate file, say `Index.js` because I want `Fetch.js` to act like a "backend" while stying the `index.js`. – Binayak Karki Jul 13 '21 at 14:45
  • If I got you right, all you need to do is just import the child component in the parent file: https://stackoverflow.com/questions/33956201/how-to-import-and-export-components-using-react-es6-webpack – Sidorina Jul 13 '21 at 14:48
  • or if you're using both components in another file, you should import them both. In this case you'll have to access the ParentComponent's children via props https://reactjs.org/docs/glossary.html#propschildren – Sidorina Jul 13 '21 at 14:51
  • IDK ma'am I mean this is the third day I started learning react and wanted to head on creating my own project, got stuck with this thing. – Binayak Karki Jul 13 '21 at 14:52
  • Maybe you'll find this article useful: https://www.pluralsight.com/guides/how-to-pass-data-between-react-components – Sidorina Jul 13 '21 at 14:57
  • I read it as well but I do not think I addressed my problem. Can we connect somewhere so I could send you my code and seek your assistance? That'd be helpful. – Binayak Karki Jul 13 '21 at 14:59
  • You can share your code right in the body of your question above. That will be helpful both for those who'll try to help you with it, and those who'll use this question as an information source in the future. You can get more info about it here: https://stackoverflow.com/help/minimal-reproducible-example – Sidorina Jul 13 '21 at 15:10
  • Please check the update. I have added my code above. – Binayak Karki Jul 14 '21 at 02:16