Having issues trying to store data using state in React so that it is accessible later

Question

I'm writing a React app to pull specific data from an API done through search (forms), storing it and manipulating it using filters and what not. So far I have pulled the data and displayed it, but I just cannot work out how to store it using state so that I can access it without having to do an entirely new data pull.

So far I have tried returning the API data to be stored in a list locally inside the function, but then I have zero access to manipulate it moving forward. I think I need 'list' with name and age stored in state, and then accessed, but I just can't work out how to do it. Any help would be greatly appreciated.

function dataPull(param) {

    const list = [
        { name: '', age: ''}
    ]

    const URLbase = "https://APIexample.com";
    const query = URLbase + param;
    const URL = URLbase + param;

    fetch(URL)
       .then(fnc(res) {
           let text = document.getElementById('textSpot');
           res.map(res => (
              <list key={res.name} age={res.age} />
           ));
           text.innerHTML = res;
}

ray · Accepted Answer · 2019-05-24T03:56:54.397

Generally speaking you shouldn't be manipulating the DOM or setting innerHTML in a react app.

If you want to store the data in component state, do the fetch in the componentDidMount lifecycle method (or equivalent hook) and then call this.setState({results: fetchedData}). Your render method can then get the data via this.state.results and render accordingly. (See example below.)

If you want to use the data beyond just this component you might want to consider implementing a data store independent of the component. Here's an example of how you might do that.

const fakeData = [
  {
    name: "chewy",
    age: 900
  },
  {
    name: "chewbacca",
    age: 40
  }
];

// wait a second and then resolve with fakeData
const fakeFetch = () => new Promise((resolve) => {
  setTimeout(() => resolve(fakeData), 1000);
})

class Wookies extends React.Component {
    state = {}

    componentDidMount () {
      fakeFetch()
        .then(result => this.setState({result}));
    }

    render () {
      const {result} = this.state;
      
      if (!result) {
        // not loaded. render loading spinner or whatever.
        return <div>loading</div>;
      }

      return result.map(item => (
        <div key={item.name}>age: {item.age}</div>
      ));
    }
}

ReactDOM.render(<Wookies />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app" />

score 0 · Answer 2 · answered May 24 '19 at 05:11

Try this,

function dataPull(param) {

    const list = [
        { name: '', age: ''}
    ]

    const URLbase = "https://APIexample.com";
    const query = URLbase + param;
    const URL = URLbase + param;

    fetch(URL)
       .then(fnc(res) {
           let text = document.getElementById('textSpot');
           let items = [];
           items = res.map(res => (
              <list key={res.name} age={res.age} />
           ));
           text.innerHTML = items;
}

Having issues trying to store data using state in React so that it is accessible later

2 Answers2