Breaking News: Grepper is joining You.com. Read the official announcement!

react axios Card List

Raymund Alum answered on July 12, 2022 Popularity 3/10 Helpfulness 2/10

answer react axios Card List

react axios Card List

Comment

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Axios from "axios";
// GitHub usernames: gaearon, sophiebits, sebmarkbage, bvaughn

const CardList = (props) => (
<div>
{props.profiles.map(profile => <Card key={profile.id} {...profile} />)}
</div>
);

class Card extends React.Component {
render() {
const profile = this.props;
return (
<div className="github-profile">
<img src={profile.avatar_url} />
<div className="info">
<div className="name">{profile.name}</div>
<div className="company">{profile.company}</div>
</div>
</div>
);
}
}

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);
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>Add card</button>
</form>
);
}
}

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 profiles={this.state.profiles} />
</div>
);
}
}

export default App;

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: notes.io

Tags: axios card javascript list

Link to this answer
Share Copy Link

Contributed on Jul 12 2022

Raymund Alum

0 Answers Avg Quality 2/10

react axios Card List

Contents

More Related Answers

react axios Card List

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.