Fetch data from API with ReactJS

Question

I want to make simple CRUD functionality which should be the same in my web app, Android app and iOS app.

Therefore, I have in node.js made an API from which I can retrieve a paginated list of all documents, a detail page of each document, and post/put requests to delete and update.

Now I am able to check for administrator rights and other things at these routes. Is this the correct approach?

Now I want to traverse this paginated list and present it with reactjs.

I guess it could be done with

import React from 'react';
import ReactDOM from 'react-dom';

export default class ItemLister extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
    console.log('test');
  }

  componentDidMount() {
    fetch('/api/events/').then(result => {
      this.setState({items:result.json()});
    });
  }

  render() {
    return (
      <div>
        <div>Items:</div>
        { this.state.items.map(item => { return <div>{http://item.name}</div>}) }
      </div>
    );
  }
}

ReactDOM.render(<ItemLister/>, document.getElementById('hello-world'));

but nothing happens (it doesn't even print anything in the console window as i tried in the constructor).

I have this script in a file /components/ItemLister.jsx and I have imported react-15.2.1 and react-dom-15.2.1. I have installed babel-cli, babel-preset-es2015, babel-preset-react and set

"presets": [
  "es2015",
  "react"
]

in my package.json.

does it not give an error - this.setState is undefined or equivalent of that. add a catch() handler to fetch() and check if there is an error. — vijayst, Jul 24 '16 at 08:04
try `fetch('/api/events/').then(res=>res.json()).then(items=> this.setState({items}))` — Kokovin Vladislav, Jul 24 '16 at 09:42

Abdennour TOUMI · Answer 1 · 2016-07-24T08:06:01.800

0

Issue with {http://item.name}

Put :

{ this.state.items.map(item =>  <div>http://{item.name}</div>) }

NOT :

{ this.state.items.map(item => { return <div>{http://item.name}</div>}) }

edited Jul 24 '16 at 08:06

answered Jul 24 '16 at 07:41

Abdennour TOUMI

87,526
38
249
254

this is because ES6 . Either use `return` & `{}` or omit all .. Thank y anyway :) – Abdennour TOUMI Jul 24 '16 at 08:05
I have tried what you suggested, but I still don't get any result. Shouldn't it ouput something in the console window if I have done it riggt – Jamgreen Jul 24 '16 at 09:16
check : http://stackoverflow.com/questions/2923858/how-to-print-a-stack-trace-in-node-js – Abdennour TOUMI Jul 24 '16 at 09:38
I have tried using `console.trace("Here I am!")`, but I still don't get any result. I might not have 'activated' the script properly. I have just included it with `` in the bottom of my script. Isn't it correct? – Jamgreen Jul 24 '16 at 09:47

score 0 · Answer 2 · answered Jan 29 '20 at 04:27

Here with Sample code using SWAPI and showing results. Full code: https://react-vzbqum.stackblitz.io

import React from 'react';
import ReactDOM from 'react-dom';

export default class ItemLister extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
    console.log('test');
  }

  componentDidMount() {
    fetch('https://swapi.co/api/planets').then(res => res.json()).then(res => {
      console.log(res.results);
      if (res.results && res.results.length > 0) {
        this.setState({items: res.results});
      }
    });
  }

  render() {
    return (
      <div>
        <div>Items:</div>
        { this.state.items.map(item => { return <div>{`http://${item.name}`}</div>}) }
      </div>
    );
  }
}

ReactDOM.render(<ItemLister/>, document.getElementById('hello-world'));

Galeel Bhasha · Answer 3 · 2016-07-26T23:08:10.980

-2

Your issue is at below line.

{ this.state.items.map(item => { return <div>{http://item.name}</div>}) }

As you using ES6 you no need to use return when returning on the same line. Replace the above code with below one...

{ this.state.items.map((item,index) => <div key={item.index}>http://{item.name}</div>)}

React recommends using key attribute with unique key value for better performance reconciliation when we insert dynamic nodes using map.

edited Jul 26 '16 at 23:08

answered Jul 24 '16 at 09:13

Galeel Bhasha

1,877
13
19

1

If you omit `return` but the curly braces, your arrow function will return `undefined`. – Pavlo Jul 25 '16 at 11:35

Fetch data from API with ReactJS

3 Answers3