JSFiddle - React, Tailwind, and code Playground

by badfreja

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="container">
</div>

Babel + JSX

const Card = (props) => {
	return (
  	<div style={{margin: '1em'}}>
  	  <img src={props.avatar_url} width="75"/>
      <div style={{display: 'inline-block', marginLeft: '10'}}>
        <div style={{fontSize: '1.2em', fontWeight: 'bold'}}>{props.name}</div>
        <div>{props.comapny}</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="Githug username" required
        			 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: []
  }
  
  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 />, document.getElementById('container'));