I am currently in the process of converting my original project to Reactjs. Since I am new to this and it's my first application, I could use some guidance on how to effectively implement this in a React-friendly way and enhance both my skills and the demo project.
You can view a live demonstration here.
My goal is to display a name as soon as its Ajax request is completed rather than waiting for all promises to finish.
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: []}
}
componentWillMount () {
const id = [1, 2, 3, 4, 5]
this.APIres(id)
}
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: Object.assign(this.state.finaldata, data)})
})
}
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 = ({ text }) => <li>{text}</li>
const List = ({ data }) => {
const listNodes = data.map((value, index) => <ListItem text={value} key={index}></ListItem>)
return <ul>{listNodes}</ul>
}
export default List
One thing to note: the id array will be included in the URL query like example.com/#/?id=1,2,3,4. I plan to use react-router for this implementation.