react
// // const Button = function (props) {
// // return (
// // <button>{props.label}</button>
// // );
// // };
// class Button extends React.Component {
// constructor(props) {
// super(props);
// this.state = { counter: 0};
// this.handleClick = () => {
// this.setState({
// counter: this.state.counter + 1
// })
// }
// }
// render() {
// return (
// <button onClick={this.handleClick}>
// {this.state.counter}
// </button>
// )
// }
// }
let data = [
{
name: 'Paul',
avatar_url: 'http://placehold.it/75',
company: 'Siren'
},
{
name: 'Maxim',
avatar_url: 'http://placehold.it/75',
company: 'Siren'
}
]
const Card = (props) => {
return (
<div>
<img src={props.avatar_url} />
<div style={{display: 'inline-block', marginLeft: 10}}>
<div>{props.name}</div>
<div>{props.company}</div>
</div>
</div>
)
}
const CardList = (props) => {
return (
<div>
{props.cards.map(card => <Card {...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);
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
// ref={(input) => this.userNameInput = input}
value={this.state.userName}
onChange={(event) => this.setState({userName: event.target.value})}
type="text"
placeholder="Github username" />
<button type="submit">Add card</button>
</form>
)
}
};
class App extends React.Component {
state = {
cards: [
{
name: 'Paul',
avatar_url: 'http://placehold.it/75',
company: 'Siren'
},
{
name: 'Maxim',
avatar_url: 'http://placehold.it/75',
company: 'Siren'
}
]
};
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)
//ReactDOM.render(<Button label="ODo"/>, mountNode);