Fourth Day,
I got mixed feelings about today.
Yesterday after making my second project, I started feeling like I am pretending to know everything but in reality, I know nothing.
I know what the term is, just don't wanna say it .๐
So, I took today's whole day for revisiting all the facts and concepts. So-called "revision".
I wasted some of my time too but I also did a remake of my yesterday's project.
My today's project :
Github Cards app but with the help of functional components this time.
const Card = (props) => {
return (
<div className="github-profile">
<img src={props.profile.avatar_url} />
<div className="info">
<div className="name">{props.profile.name}</div>
<div className="company">{props.profile.company}</div>
</div>
</div>
);
};
const CardList = ({ profiles }) => {
return profiles.map((profile) => <Card profile={profile} />);
};
const Form = (props) => {
const fetchInput = (event) => {
event.preventDefault();
let inputData = document.getElementById("input_cardName");
props.onSubmitHandler(inputData.value);
inputData.value = "";
};
return (
<form onSubmit={fetchInput}>
<input type="text" id="input_cardName" />
<button type="submit">Add Card</button>
</form>
);
};
const App = () => {
const [currentProfiles, addProfile] = useState([]);
const addCard = async (profileName) => {
const resp = await axios.get(`https://api.github.com/users/${profileName}`);
let profile = await resp.data;
addProfile([...currentProfiles, profile]);
};
return (
<div>
<div>Github Cards Application</div>
<Form onSubmitHandler={addCard} />
<CardList profiles={currentProfiles} />
</div>
);
};
ReactDOM.render(<App />, mountNode);
You can try and run the code in this playground.
But even after that, I didn't felt satisfied. ๐คทโโ๏ธ
So I started learning again.
I'll update the post if I'll learn something wonderful today.
Also I'd really appreciate it if someone wanna share their experience regarding this or best practices to learn. ๐
Till then,
Thanks for joining me.๐ค
Have a beautiful day.๐ท
Top comments (1)
Keep it up dude