When I first started this second phase I thought it'd be much easier since I got the basics of Javascript down pretty well and in the beginning, I was looking at React and thinking to myself "Oh this isn't so bad actually, I think I could do this fairly easily" and I began down the road of learning React.
After the first few labs, I was still feeling pretty good about learning React and it felt slightly simple so I wasn't worried about it too much, I was doing pretty good with components and props and was very confident until I was asked to pass a prop to a child component, I thought it was going to be pretty simple since I did it already (albeit I lacked a lot of understanding of it).
It was a humble Article component tasked with rendering blog posts on a webpage. Here's a snippet of my initial attempt:
import React from "react";
const Article = ({ title, date = "January 1, 1970", preview }) => {
return (
<article>
<h3>{title}</h3>
<small>{date}</small>
<p>{preview}</p>
</article>
);
};
export default Article;
Simple and pretty straightforward and I believed I had finished and would pass all of the tests with this since I passed all of the props down from ArticleList.js using code written like this:
function ArticleList({ posts }) {
return (
<main>
{posts.map((post, index) => (
<Article key={index} post={post} />
I was stumped for hours as to why this wasn't working because I thought it was returning an easily usable array with all of the data needed. After hours of staring at my screen not understanding what was wrong I finally realized that I needed to use destructuring instead of just sending the array down to the child component as is and the code I ended up writing was this:
import React from "react";
import Article from "./Article";
function ArticleList({ posts }) {
return (
<main>
{posts.map((post) => (
<Article
key={post.id}
title={post.title}
date={post.date}
preview={post.preview}
/>
))}
</main>
);
}
export default ArticleList;
when it finally passed the test using this code I was so relieved yet annoyed at myself for taking so long with such a simple problem, I often overthink and overcomplicate my issues with coding instead of trying to fix starting from basic problems.
After this mini project, though I feel like my understanding of props in general has gone up tremendously, though there is still more to learn with them, I'm pretty confident that I can use them without much trouble now.
In the end, my experience learning props was not as smooth as I had hoped due to me needlessly overcomplicating it, but because I spent so much time on it I think I developed a deeper understanding of it that you could only get through trial and error and experience. Though I know in the future there will still be new problems I get stuck on and code that I overcomplicate, but I'm excited to learn it nonetheless.
Top comments (0)