Confused about React mapping

Question

I am currently learning react and I am confused about mapping components/props. While I generally understand the concepts one thing that is challenging me right now is understanding naming conventions for {props.xxx.dataname} I don't understand the naming convention and how the xxx part is called. Sometimes it can be called item or product and it is never declared in the code itself anywhere. This example i listed is stumping me and I don't understand how item registers as anything when it has not been declared.

Please explain this to me, especially this code here "item={item}". Item is never declared so how does this code know to find "Item" from the 3rd code snippet holding the data.

Also how come in the 4th code snippet "product" can be used instead of "item"?

import React from "react"

function Product(props) {
    return (
        <div>
            <h2>{props.product.name}</h2>
            <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>
        </div>
    )
}

export default Product

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input type="checkbox" checked={props.item.completed}/>
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

function App() {
    const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)
    
    return (
        <div className="todo-list">
            {todoItems}
        </div>
    )
}

export default App

const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

Hey Dave, thanks for your answer please see the updated question. Thank you! — LSJ32141, Jul 07 '23 at 05:00
Sorry I am learning react from a Scrimba tutorial right now, and this is the best I can provide. These are the links to the code examples I am extracting from: https://scrimba.com/learn/learnreact/react-todo-app-phase-3-c4dDqtg and https://scrimba.com/learn/learnreact/mapping-components-practice-c6b6Lfm — LSJ32141, Jul 07 '23 at 05:03
Have a read of [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component) — Phil, Jul 07 '23 at 05:05

score 2 · Answer 1 · answered Jul 07 '23 at 05:03

Let's take this line to start:

const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)

What you're doing with the map() function is actually looping through the todosData array. The map function takes as parameter a callback function, that is executed on each element of the array. In this case you callback is:

item => <TodoItem key={item.id} item={item}

where item is the single array element. Now you can call it whatever: item, product, or whatever name, it will always represent the single element of the array and will be available in your function to work with that element. By convention, the name you use is a singular version of what the array is about so, for example, if the array is called cars, in the callback you shall use car instead of item.

That being said, here item={item} you're passing item value to item prop, so in your component, inside the props object you will be able to retrieve item as a prop. So, from here comes props.item.whatever_propery_in_item

Hope this helps

Hey Giuliano, thanks for your answer it's great and really cleared many things up for me. Is it possible for you to help me clarify the 1th code snippet? While I understand now the use of "items", I still don't understand how "product" is used in this case instead of "item" — LSJ32141, Jul 07 '23 at 05:09
I'm really glad this was useful to you. Anyway, the first snippet is more or less the same than the second; while TodoItem component expects an "item" prop (something like ``) the Product component expects a product prop, so when in the loop you're going to render your jsx you will have something like ``. This product may be inside a map like the former example and pass a product variable instead of an item, but the logic behind is the same. We call it product for coherence — Giuliano Gostinfini, Jul 07 '23 at 11:25

Confused about React mapping

1 Answers1