title: Fetch and display new contents when user click on each list item [React]
body: <p>First, I want to load a JSON from my server; it will contain a list of objects. Then, I need to render these objects like a list. When a list item is clicked, the user should be redirected to a page that shows information about the clicked item. That information displayed should be fetched from another API call to my server.</p>
  
  <p>Can someone guide me, please?</p>
  
  <pre><code>  state = {
      isLoading: true,
      users: [],
      error: null
    };
  
    fetchUsers() {
      fetch(`http://localhost:3001/blog/view`)
        .then(response =&gt; response.json())
        .then(data =&gt;
          this.setState({
            users: data,
            isLoading: false,
          })
        )
        .catch(error =&gt; this.setState({ error, isLoading: false }));
    }
  
    componentDidMount() {
      this.fetchUsers();
    }
    render() {
      const { isLoading, users, error } = this.state;
      return (
        &lt;React.Fragment&gt;
          &lt;h1  style={{textAlign: 'center'}}&gt;My Blog&lt;/h1&gt;
          {error ? &lt;p&gt;{error.message}&lt;/p&gt; : null}
          {!isLoading ? (
            users.map(user =&gt; {
              const { _id, title, details,date } = user;
  
              return (
  
                  &lt;div className='blog'&gt;
  
                &lt;div key={_id}&gt;
                  &lt;p&gt;Name: {title}&lt;/p&gt;
                  &lt;p&gt;Email Address: {details}&lt;/p&gt;
                  &lt;p &gt;Email Address: {date}&lt;/p&gt;
                  &lt;hr className='banner-text hr' /&gt;
                &lt;/div&gt;
                &lt;/div&gt;
              );
            })
          ) : (
            &lt;h3&gt;Loading...&lt;/h3&gt;
          )}
        &lt;/React.Fragment&gt;
      );
  }
  }
  </code></pre>