More react drilling

react_intro_2.js

const Card = (props) => {
	return(
  	<div style={{margin: '1em'}}>
    <img style={{width: 75}} src={props.avatar_url}/>
      <div style={{ display: 'inline-block', marginLeft: 10}}>
        <div style={{ fontSize: '1.25em', fontWeight: 'bold'}}>{props.name}</div>
        <div>{props.company}</div>
      </div>
  	</div>
  )
}

const CardList = (props) => {
	return(
  	<div>
      {props.cards.map(card => <Card key={card.id} {...card}/>)}
    </div>
  )
}

class Form extends React.Component {
	state = {
  	userName: ''
  }
  
  handleSubmit = (event) => {
  	event.preventDefault();
    axios.get(`https://api.github.com/users/${this.state.userName}`)
    	.then(resp => {
      	this.props.onSubmit(resp.data);
        this.setState({username: ''})
      })
  }
  
  
  
  render(){
  	return(
    	<form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          placeholder="Github Username"
          required
          value={this.state.userName}
          onChange={ (event) => this.setState({userName: event.target.value})}
        />
        <button type="submit">Add User</button>
      </form>
    )
  }
}

class App extends React.Component{
	state = {
  	cards: []
  }

	addNewCard = (cardInfo) => {
  	this.setState(prevState => ({
    	cards: prevState.cards.concat(cardInfo)
    }))
  }

  render(){
  	return(
    	<div>
        <Form onSubmit={this.addNewCard}/>
        <CardList cards={this.state.cards}/>
      </div>
  	)
  }
}

ReactDOM.render(<App />, mountNode)