Rendering Techniques: Missing info on how props and components work, causing confusion.

[hoomanhorsey]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

re: the section included in the heading: "Rendering a list of components in JSX"

which includes a code fragment:

_

function ListItem(props) {
return

{props.animal}

}

function List(props) {
return (

{props.animals.map((animal) => {
return ;
})}

);
}

function App() {
const animals = ["Lion", "Cow", "Snake", "Lizard"];

return (

Animals:

);
}

_

and the following explanation:

_"We have moved our

element to a different component called . It still returns the
element, but we can do a lot more with it as a component.

This component accepts a props which is an object containing the animals that we defined as a property when we wrote . Do note that you can name it anything, for example, . You will still need to pass the animals to the property, but now you will use props.animalList instead of props.animals.

We have also created a different component for the

• element called , which also accepts props, and uses props.animal to render the text. It should now render the same thing."_

Correct me if I'm wrong, but at nowhere does the original instruction describe how the component accepts a prop. Normally with a function you expect an argument to be included within brackets. Here a component accepts an argument simply by having it written immediately after the name of the component. This is very confusing to those unfamiliar with React if it isn't explained or made explicit. There's an assumption that one already knows how props work, showing but not explaining.

I was really confused by this and resorted to chatGPT to explain it to me. The example is good. It can be followed. But the fact that this key piece of info is missing made me very confused and I got stuck on it for longer than I perhaps should have.

Also, THANK YOU so much to you all for your volunteer work and contributions. The entire course is pretty amazing.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-rendering-techniques

(Optional) Discord Name

n/a

(Optional) Additional Comments

No response

[GaneshS288]

Isn't this how javascript functions define parameters in general? function List(props) says that this function has a parameter called props. So if you call List({animal: data}) you are passing this object as props parameter.

When we use brackets we are performing object destructuring on that passed object function List({animal}).

Both of these are native javascript things and have been taught before. The lesson also says that all you need to know for now is that props are just arguments passed to the function and you'll learn more later. Unless I'm mistaking you.

Ignore the above I get what you mean now.
The lesson has this paragraph

This component accepts a props which is an object containing the animals that we defined as a property when we wrote <List animals={animals} />

Which says that by writing animals = {animals} we defined animals as a property on the props object. Did you find this line confusing?

[hoomanhorsey]

Yes the paragraph that you've mentioned is the area that I found confusing. Not sure if others have, but I certainly did!

The function / component declaration is pretty clear, i.e. 'function ListItem(props)'.

It's when that function / component is called inside what the function returns, i.e.

.<.List animals={animals} /.>

It's not clear to me that 'animals={animals}' is the argument being passed into the List component, as I don't think we've seen this syntax before. For example, if it was express '<List(animals={animals} />' it would make sense, disregarding that it wouldn't actually work.

Apologies if my terminology is a bit loose. Still learning!

edit: bits of code that I'm trying to quote keep on disappearing. Not sure why. I put random .s in there so it reproduces.

[hoomanhorsey]

I feel like the text is actually alright. But it perhaps could do with the addition of something like 'The prop is passed into the component by including it immediately after the name of the Component. We haven't seen syntax like this before, as with a function the arguments are typically enclosed with brackets. Here brackets are unnecessary', or something like that.

[MaoShizhong]

Not related to the main issue but

edit: bits of code that I'm trying to quote keep on disappearing. Not sure why. I put random .s in there so it reproduces.

You need code blocks just like in Discord because < > has meaning in GitHub markdown.

[hoomanhorsey]

Not related to the main issue but

edit: bits of code that I'm trying to quote keep on disappearing. Not sure why. I put random .s in there so it reproduces.

You need code blocks just like in Discord because < > has meaning in GitHub markdown.

Yes thank you for that. Apologies my initial question may be so nonsensical due to the fragments of code I've quoted. And thank you for the patience in reading my comment.

[wise-king-sullyman]

@hoomanhorsey thanks for raising this issue.

I think it's totally reasonable to add a small note clarifying this, maybe something along the lines of "props are just like function arguments, but we pass them to JSX elements much the same way that we pass attributes to regular HTML elements".

[github-actions]

This issue is stale because it has had no activity for the last 30 days.

[KevinMulhern]

Hey @hoomanhorsey, just checking in - are you still working on this, or would you like us to give someone else a shot at it?

[hoomanhorsey]

Hey @KevinMulhern, thanks for chasing me up about this. Apologies for not attending to this sooner. I'm mildly embarrassed about this but my beginner brain has been somewhat overwhelmed by the current stuff I'm working on and I've not had a chance to figure out how to make changes to the material.

I'd like to help out one day. But perhaps it's best for this one if I hand it over to someone else who knows how to make the changes!

Thanks again.