ReactJS - How do I render out a component from several prop arrays?

Question

I am trying to learn ReactJS by building a simple web application that makes several ajax calls to a mock api and rendering the results onto the page.

So far, I can successfully make an ajax call to the mock api via the appropriate use of componentDidMount. The response text is a JSON object, where I store several arrays in state, for example:

var newTitle = this.state.title.slice();
newTitle.push(myObject[x].title);
this.setState({title:newTitle})

var newBody = this.state.body.slice();
newBody.push(myObject[x].body);
this.setState({body:newBody})

myObject is the object storing the parsed JSON response.

I can successfully render out one array (ie title) by doing the following:

<FeedController title={this.state.title}/>

class FeedController extends Component{
  render({
    return(
      {this.props.title.map(function(element,i){
        return <FeedItem title={element} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      </div>
    );
  });

I loop through the title state and display a FeedItem with each iteration. My problem and question, however, is how do I render out a component from several prop arrays? For example, I would like title[1] to be displayed alongside body[1] etc.

I presume I would do something where I pass title and body as props, but I can't work out how to map both and also render out the results. Ideally, my FeedItem component will look like the following:

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

Answer 1

If you know that the arrays will be the same length, you can use the same index to get matching data.

<FeedController title={this.state.title} body={this.state.body}/>

class FeedController extends Component{
  render({
    return(
      {this.props.title.map(function(element,i){
        return <FeedItem title={element} body={this.props.body[i]} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

Alternatively, you can merge the data before you pass it in to the FeedController.

render(){
    let data = this.state.title.map( (title, i) => {
        return {
            title: title,
            body: this.state.body[i]
        }
    }
    return <FeedController data={data} />
}

class FeedController extends Component{
  render({
    return(
      {this.props.data.map( (data,i) => {
        return <FeedItem title={data.title} body={data.body} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}