Rendering Collections and Modules in React: My Learning Journey

Today marked the second day of my commitment to reviewing frontend development concepts. My goal is to build at least two portfolio projects to showcase my skills as I continue hunting for a paid or internship role as a frontend developer.

I covered several key topics today that I believe are essential for any React developer.

Array Methods

Arrays play a critical role in React. Data fetched from databases often comes in array format, so understanding how to manipulate arrays is essential. Here’s a quick overview of the methods I focused on:

• arr.find() – Returns the first element that matches a condition.

• arr.filter() – Returns a new array with all elements that match a condition.

• arr.map() – Transforms each element and returns a new array of the same length.

• arr.reduce() – Reduces an array to a single value using an accumulator.

Other useful array methods include:
some(), every(), includes(), forEach(), sort(), slice(), and splice().

Higher-Order Functions

I also learned about higher-order functions. Functions like map, filter, and find that take a callback function as an argument are considered higher-order functions.

They are “higher-order” because they operate on other functions—either by taking them as arguments or returning new functions.

Example:

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2); // [2, 4, 6]

Passing Event Handlers to Child Components

This concept initially made me scratch my head, but it’s clearer now. In React, props are how data—including functions—is passed from a parent to a child.

To pass an event handler:

1. Define the handler in the parent:

   function Parent() {

   const handleClick = () => console.log("Button clicked!");

   return <Child onClick={handleClick} />;

   }

2. Receive it in the child as a prop and attach it to an event:

   function Child({ onClick }) {

   return <button onClick={onClick}> Click Me </button>; }

This allows the child component to trigger parent logic without owning the state.

Array Indexes as Keys in map()

I learned that using array indexes as keys is not recommended. While it might suppress warnings in the console, it can lead to rendering bugs and performance issues.

Keys help React identify elements between renders. If the list changes—items are moved, removed, or reordered—React may reuse the wrong elements, causing:

• Incorrect UI updates

• Loss of input state in forms

• Unnecessary re-renders

Solution

Use unique, stable IDs from the data. If your data doesn’t have IDs, libraries like NanoID can generate them.

⚠️ Caution: Generate the ID once when the item is created. Regenerating on every render will change keys and cause the same problems.

Destructuring Props

Destructuring props makes code cleaner and easier to read. Instead of accessing props with props.propName, you can extract them directly.

function Child({ name }){

return <p>{name}</p>
}

You can also destructure multiple props:
function Child({ name, age, onClick}){

return <button onClick={onClick}>{name} - {age}</button>;
}

Next Steps

The next topic in my learning journey is submitting data to a React app using forms. I’m excited to continue building practical skills and improving my frontend expertise.

Thanks for reading!
Happy learning. 🚀