My struggle learning props in phase 2

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.