How to trigger re-render after changing json via fetch?

Question

JavaScript

If the code renders the list from json using the fetch call in componentDidMount(), then how to trigger a re-render after any json modification via post, put, etc.?

Answer 1

When the data that you request with fetch has arrived, put it in the state, and render from the state. Something like this:

class MyComponent extends React.Component {
  state = {
    loading: true,
    data: null
  }

 componentDidMount () {
    const data = await fetch(/* ... */);
    this.setState({ loading: false, data });
 }

 render () {
   const { data, loading } = this.state;

   if (loading) {
     return <div className='loading' />
   }

   return this.renderData(data);
 }
}