React component to list TV shows from a JSON result

Question

I'm trying to rewrite my old project in Reactjs. As I am a beginner and this is my first app, I need some assistance in understanding what is the best way to do this in the React way and how I can improve myself and this demo project.

Here is a working demo of it.

ListManager.js

import React, { Component } from 'react'
import List from './List'

export class ListManager extends Component {
    constructor(props, context) {
       super(props, context)
       this.state = { finaldata :[]}
}


APIres(ids){
    Promise.all(ids.map(id =>
        fetch('http://api.tvmaze.com/shows/'+id).then(resp => resp.json().then(data => data.name))
        )).then(data => {
            data.sort()
            this.setState({finaldata:data})
        })
}

componentWillMount(){
    const id = [1,2,3,4,5]
    this.APIres(id)

}

render() {

    return ( 
        < div >
            <h3>{this.props.title}< /h3> 

            <List data={this.state.finaldata} />
        < /div >
    )
  }
}

List.js

'use strict'
import React, { Component } from 'react'

const ListItem = (props) => <li>{ props.text }</li>

const List = (props) => {
    const listNodes = props.data.map((
    value,index) => {
        return(
            <ListItem text={value} key={index}></ListItem>
        )
    })

    return ( <ul>{listNodes}</ul>
    )
}

export default List

Some note: id array will come with a URL query like example.com/#/?id=1,2,3,4. I will be using react-router for this.

Answer 1

A few things to change. Move the api request to componentDidMount because componentWillMount is considered legacy now. Rename the method thats making the api request to be more declarative which is to be more descriptive of whats its doing. Move the list of ids into the method thats making the api request. All of those changes + the changes to the api request from your question here https://stackoverflow.com/questions/39473302/show-result-from-parallel-ajax-request-in-react-component/39486654#39486654 would look like this:

import React, { Component } from "react";
import List from "./List";

class ListManager extends Component {
  constructor(props) {
    super(props);

    this.state = {
      listData: []
    };

    this.getListData = this.getListData.bind(this);
  }

  componentDidMount() {
    this.getListData();
  }

  getListData() {
    const ids = [1, 2, 3, 4, 5];

    let listData = [];

    ids.forEach(id =>
      fetch("http://api.tvmaze.com/shows/" + id)
        .then(resp => resp.json())
        .then(show => {
          listData.push(show);
        })
    );

    this.setState({
      listData: listData.sort((a, b) => a.runtime - b.runtime)
    });
  }

  render() {
    return (
      <div>
        <h3>{this.props.title}</h3>
        <List data={this.state.listData} />
      </div>
    );
  }
}

export default ListManager;