GithubFetch,js

const Card = function(props) {
	return (
			<div 
        style={{display: 'flex',  
        border: "1px solid #f0f0f0", 
        marginBottom: "10px" , 
        alignItems: 'center'}}>
          <img 
          width="150px" 
          src={props.imageURL} alt=""/>
          <div style={{padding: '0 10px'}}>
            <h5>
              {props.name}
            </h5>
            <h5><small>{props.location}</small></h5>
            <hr/>
            <p style={{fontSize: '.7rem', margin: '0'}}>
             {props.description}
            </p>
        </div>
        
      </div>
    	);
};


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

class Form extends React.Component {
  handleSubmit = (event) => {
	  event.preventDefault();
    console.log(event.target)	
  }
	render(){
  	return(
    	<form onSubmit={this.handleSubmit}>
        <input type="text"/>
        <button type="submit"> Get User Profile </button>
      </form>
    );
  }
}

class App extends React.Component {
	state = {
  	cards: [
    {
      name: "Kshitij Purwar",
      imageURL : "https://avatars1.githubusercontent.com/u/9314776?v=3",
      location : "Delhi, INDIA",
      description : " I am a front-end developer, constant learner who loves to craft intuitive and beautiful websites with pixel perfection"
    },
    {
      name: "Kshitij Purwar",
      imageURL : "https://avatars2.githubusercontent.com/u/150330?v=3",
      location : "Austin, TX",
      description : "I teach JavaScript and I'd love to come help your team's developers. If that's interesting to you, please reach out to me [email protected]."
    }
    ]
  }
	render(){
  	return(
    	<div>
        <Form/>
        <CardList cards = {this.state.cards}/>
      </div>
    );
  }
}




ReactDOM.render(<App/>, mountNode);