reactjs - React — Passing data between siblings and iterating it -

i have 2 questions, first passing data between components , second component hierarchy.

right now, in data component trying set name property , pass listitem component should iterate based on api request. tried many things without success. doing wrong? data needs iterated when setting new state? passing correctly?

basic pseudocode

• read data api
• set data component state
• create siblings components based on data stored
• render components

the second question hierarchy of components. keep reading around web data request should setup @ top , separated. having in place, other components feed data , execute. finally, app component render components accordingly. example below, going right track? correct creating component specific data request or should done in app component?

i understand these questions might basic struggling understand , appreciate if can me understand or point me basic example can digest.

thank in advance. (sorry, had more 2 questions.)

class app extends react.component {   render() {     return (       <ul>         <listitem name={this.state.name} />       </ul>     )   } }   class data extends react.component {   constructor(props) {     super(props)     this.state = {       name: '',       requestfailed: false,     }   }    componentdidmount() { // executes after mouting       fetch('https://api.tfl.gov.uk/bikepoint')     .then((response) => {       return response.json()     }).then((d) =>  {       console.log('parsed json', d[0].commonname)       this.setstate({             name: d.commonname       });     }).catch(function(ex) {       console.log('parsing failed', ex)       this.setstate({           requestfailed: true         })     })   }    render() {      if(this.state.requestfailed) return <p>request failed.</p>     if(!this.state.name) return <p>loading</p>      const nameslist = names.map(function(name, index){       return <listitem key={index} name={this.state.name} />     })      return  <ul>{ nameslist }</ul>   } }  class listitem extends react.component {   render() {     return <li> { this.props.name } </li>   } }  reactdom.render(<app />, document.getelementbyid('app')); 

codepen

where start -

first, app component needs render data component. react works in way parent element renders children elements , not rendered doesn't exist.

then, need remap response names, if wanted - not sure.

in render method, want take name out of mapping function, not state. removed name state, want keep names instead of 1 name. there lot of small thing had adjust make work, post working code pen here, can see needed done.

https://codepen.io/anon/pen/eemqxx?editors=0010