React Router Fetching data from API

Question

I am new to react and now am working on a app that has to fetch some data from an API.

I have my component that supposed to fetch the data and get an Json object back and populate a table.

      class RenderTable() extends React.Component {
    render() {
      fetch("http://localhost:6002/api?act=getall")
     .then(data=> data.json())
     .then(
       result => {
       this.setState({
        library: result
      });
        console.log(this.state.result);
    },
    error => {
      this.setState({
        library: "error"
      });
      return null;
    }
  );
}

render() {
return (
  <div id="libTable">
    <table>
      <tbody>
        <tr>
          <th>Genre</th>
          <th>Description</th>
          <th>Date</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>{JSON.stringify(this.state.library)}</td>
        </tr>
      </tbody>
    </table>
  </div>
);

} }

 <Route path="/RenderTable" component={RenderTable} />

my library is an array that I initialize as an empty array in my main app container. The routing path is in my main app under render. Any help is much appreciated.

You have to map through the state in order for it to work.

NduJay
– NduJay

2019-12-05 19:54:36 +00:00
Commented Dec 5, 2019 at 19:54 — NduJay
– NduJay, Commented Dec 5, 2019 at 19:54

j0nezz · Accepted Answer · 2019-12-05 20:14:58Z

Map through your state in the render method like this:

return (
  <div id="libTable">
    <table>
      <tbody>
        <tr>
          <th>Genre</th>
          <th>Description</th>
          <th>Date</th>
          <th>Price</th>
        </tr>
        {this.state.library.map(book => (
          <tr>
            <td>{book.genre}</td>
            <td>{book.description}</td>
            <td>{book.date}</td>
            <td>{book.price}</td>
          </tr>
          ))}
      </tbody>
    </table>
  </div>
);

You also have some other weird errors in your class component like e.g. 2 render methods. A possible correct implementation would look like this:

class RenderTable extends React.Component {
  state = {
    library: [],
    error: ""
  };

  componentDidMount() {
    fetch("http://localhost:6002/api?act=getall")
      .then(data => data.json())
            .then(result => {
        this.setState({
          library: result
        });
        console.log(this.state.result);
      })
      .catch(error =>
        this.setState({
          error
        })
      );
  }

  render() {
    return (
      <div id="libTable">
        <table>
          <tbody>
            <tr>
              <th>Genre</th>
              <th>Description</th>
              <th>Date</th>
              <th>Price</th>
            </tr>
            {this.state.library.map(book => (
              <tr>
                <td>{book.genre}</td>
                <td>{book.description}</td>
                <td>{book.date}</td>
                <td>{book.price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

chrisbyte · Accepted Answer · 2019-12-05 20:22:05Z

It looks like you have two render functions. Unless something changed since I last updated React, that will not work. Regardless, you should not set the state in the render function, that is purely for rendering your controls.

Instead, add the fetch call to the componentWillMount

EDIT: componentWillMount is deprecated, use componentDidMount instead (as mentioned in other answers, depending on your version of React)

class RenderTable() extends React.Component {

componentDidMount () {
  fetch("http://localhost:6002/api?act=getall")
     .then(data=> data.json())
     .then(
       result => {
       this.setState({
        library: result
      });
        console.log(this.state.result);
    },
    error => {
      this.setState({
        library: "error"
      });
      return null;
    }
  );
}

render() {
    return (
      <div id="libTable">
        <table>
          <tbody>
            <tr>
              <th>Genre</th>
              <th>Description</th>
              <th>Date</th>
              <th>Price</th>
            </tr>
            <tr>
              <td>{JSON.stringify(this.state.library)}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

Collectives™ on Stack Overflow

React Router Fetching data from API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related