Making REST calls from a react component

There are a couple of errors in your code. The one that's probably tripping you up is the this.setState({items:result.json()})

Fetch's .json() method returns a promise, so it will need to be dealt with as async.

fetch(`http://jsonplaceholder.typicode.com/posts`).then(result=>result.json()).then(items=>this.setState({items}))

I don't know why .json() returns a promise (if anyone can shed light, I'm interested).

For the render function, here you go...

<ul>   {this.state.items.map(item=><li key={item.id}>{item.body}</li>)}</ul>

Don't forget the unique key!

For the other answer, there's no need to bind map.

Here it is working...

http://jsfiddle.net/weqm8q5w/6/

You can try this for your render method:

render() {    var resultNodes = this.state.items.map(function(result, index) {        return (            <div>result<div/>        );    }.bind(this));    return (        <div>            {resultNodes}        </div>    );}

and don't forget to use .bind(this) for your fetch(...).then(), I don't think it could work without...

Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:

In your case:

componentDidMount(){  fetch('http://api/call')      // returns a promise object    .then( result => result.json()) // still returns a promise object, U need to chain it again    .then( items => this.setState({items}));}

result.json() returns a promise, because this it works on a response stream and we need to process entire response first in order to work.