Ajax with Axios
handleSubmit = async (event) => {
event.preventDefault();
const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);
console.log(
resp.data
);
};
class Form extends React.Component {
state = { userName : '' }
handleSubmit = async (event) => {
event.preventDefault();
const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);
this.props.onSubmit(resp.data);
};
.....
class App extends React.Component {
state = {
profiles : [],
};
addNewProfile = (profileData) => {
this.setState( prevState => ({
profiles : [...prevState.profiles, profileData],
}));
};
render() {
return (
<div>
<div className="header">{this.props.title}</div>
<Form onSubmit={this.addNewProfile} />
<CardList profile={this.state.profiles}/>
</div>
);
}
}
handleSubmit = async (event) => {
event.preventDefault();
const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);
console.log(
resp.data
);
};
Passing Information
class Form extends React.Component {
state = { userName : '' }
handleSubmit = async (event) => {
event.preventDefault();
const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);
this.props.onSubmit(resp.data);
};
.....
class App extends React.Component {
state = {
profiles : [],
};
addNewProfile = (profileData) => {
this.setState( prevState => ({
profiles : [...prevState.profiles, profileData],
}));
};
render() {
return (
<div>
<div className="header">{this.props.title}</div>
<Form onSubmit={this.addNewProfile} />
<CardList profile={this.state.profiles}/>
</div>
);
}
}
Comentarios
Publicar un comentario