Card List from Github

App.js

const Card = (props) => {
	return (
  	<div
    	style={
      	{
      		margin: "1em",
      	}
      }
    >
    	<img width="75px" src={ props.avatar_url } />
      
      <div
      	style={
        	{
          	display: "inline-block",
            marginLeft: "10px"
        	}
        }
      >
      
      	<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();
    // console.log("Form was submitted :: " + this.state.userName);
    
    axios.get(`https://api.github.com/users/${this.state.userName}`)
    	.then(response => {
      	this.props.onSubmit(response.data);
      	// console.log(response);
      });
  }

	render() {
  	return (
    	<form onSubmit={ this.handleSubmit }>
      	<input
        	type="text"
          placeholder="Github username"
          value={ this.state.userName }
          onChange={ (event) => this.setState({ userName: event.target.value }) }
        />
        <button type="submit">Add Card</button>
      </form>
    );
  }
}

class App extends React.Component {
	state = {
  	cards: [
      {
        name: "John Doe",
        company: "UTD",
        avatar_url: "https://avatars2.githubusercontent.com/u/1456417?v=4"
      },
      {
        name: "Kylo Ren",
        company: "First Order",
        avatar_url: "https://avatars2.githubusercontent.com/u/1456416?v=4"
      }
    ]
  };
  
  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);