title: reactjs - fetching data from api
body: <p>I'm still fairly new to ReactJS, and through the help of the great SO community, I've been building a small exercise that moves items back and forth between two components on a click. These items are coming from data in a json array <code>items=[]</code> that I hard coded into the file. I was wondering how I would go about getting the data from an api, I've read the documentation and know I should do it via the <code>componentDidMount</code> method, however I am getting stuck figuring out how to set the state in the method. The code is below...</p>
  
  <pre><code>class SingleItem extends React.Component {
  render() {
      let data = this.props.data;
  
      return (
          &lt;li onClick={this.props.onClick}&gt;
              &lt;div&gt; {data.name} &lt;/div&gt;
          &lt;/li&gt;
      );
    }
  }
  
  class ItemList extends React.Component {
     render() {
      let itemArr = this.props.allItems;
      let myItems = this.props.items;
      let handleEvent = this.props.handleEvent;
  
      let listItems = itemArr.map((itemObj) =&gt; {
          if (!myItems.includes(itemObj.id)) return null;
  
          return &lt;SingleItem
              key={itemObj.id}
              data={itemObj}
              onClick={() =&gt; handleEvent(itemObj.id)}
          /&gt;;
      });
  
      return (
          &lt;ul&gt;
              {listItems}
          &lt;/ul&gt;
      );
    }
  }
  
   class App extends React.Component {
     constructor(props) {
       super(props);
  
       this.state = {
          data: [],
          boxOne: props.items.map(item =&gt; item.id), // init the boxes with 
   itemIds
          boxTwo: []
      };
  
      this.handleEvent = this.handleEvent.bind(this);
  }
  
  handleEvent(itemId) {
      const isInBoxOne = this.state.boxOne.includes(itemId);
  
      // Heres the magic, if the item is in the first Box, filter it out,
      // and put into the second, otherwise the other way around..
      this.setState({
          boxOne: isInBoxOne
              ? this.state.boxOne.filter(i =&gt; i !== itemId)
              : [ ...this.state.boxOne, itemId ],
          boxTwo: isInBoxOne
              ? [ ...this.state.boxTwo, itemId ]
              : this.state.boxTwo.filter(i =&gt; i !== itemId)
      });
  }
  render() {
      return (
          &lt;div className="wrapper"&gt;
              &lt;div className="box"&gt;
                  &lt;ItemList handleEvent={this.handleEvent} items={this.state.boxOne} allItems={this.props.items} /&gt;
              &lt;/div&gt;
              &lt;div className="box"&gt;
                  &lt;ItemList handleEvent={this.handleEvent} items={this.state.boxTwo} allItems={this.props.items} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
    }
   };
  
  var items = [
    {name: "Item 1", id: 1},
    {name: "Item 2", id: 2},
    {name: "Item 3", id: 3},
    {name: "Item 4", id: 4},
    {name: "Item 5", id: 5},
    {name: "Item 6", id: 6}
   ]
  
  ReactDOM.render(
     &lt;App items={items} /&gt;,
     document.getElementById('root')
   );
  </code></pre>