Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const Card = (props) => {
return (
<div style={{margin: '1em'}}>
<img 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();
console.log('Event: Form Submit', this.state.userName);
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"
value={this.state.userName}
onChange={(event) => this.setState({ userName: event.target.value })}
placeholder="Github username" required />
<button type="submit">Add card</button>
</form>
);
}
}
class App extends React.Component {
state = {
cards: [
{ name: "Ethan Luke Stenis",
avatar_url: "https://avatars3.githubusercontent.com/u/12698279?v=4",
company: "Pluralsight" },
{ name: "Eddie Garcia",
avatar_url: "https://avatars2.githubusercontent.com/u/8964482?v=4",
company: "Austin Coding Academy" },
]
};
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.