React list and keys, missing object properties

Question

In this react tutorial, the author uses a snippet of code, starting on line 61:

const List = (props) => (
  <ul>
    {props.list.map((item) => (
      <Item key={item.objectID} item={item} />
    ))}
  </ul>
);

This function is called from within the const, App, <List list={stories} /> on line 35. And lastly, stories is an object:

const stories = [
    {
      title: 'React',
      url: 'https://reactjs.org/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://redux.js.org/',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

I'm confused regarding line 61, specifically the code props.list.map. From the object, stories, there is no list attribute. However, in line 35, <List list={stories} /> seems to imply that stories will be referenced by the key, list.

My questions are:

What's going on here?
Why would this extra complexity be beneficial (globally speaking beyond the context of this code)?

Brian Thompson · Accepted Answer · 2022-02-24 14:24:29Z

2

The prop is named list, but the value of that prop is being filled by the stories const. The reason you might do that is to make your List component generic and flexible.

If you wanted to reuse List for some other purpose, but had to pass it a prop named stories when you were actually passing it classes or some other type of list, it would be confusing.

In your case, just understand that props.list is actually stories here.

answered Feb 24, 2022 at 14:24

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jbuddy_13 Over a year ago

In your second sentence/paragraph, w/o the list name, could any arbitrary object be supplied, it just need be referenced as stories? Or does the list= syntax allow for any arbitrary object to be passed?

Brian Thompson Over a year ago

A component determines the names of the props it accepts. So if the List function uses props.something, then anything that uses List is now required to name the prop something (<List something={stories} />). Any data may be provided as the value, that's the responsibility of the user of the component

k.tten · Accepted Answer · 2022-02-24 14:26:53Z

Given any <Component prop={value} />, you access value with prop:

function Component(props) {
    props.prop; // get value :O
}

Many people use destructuring because it is easier to read:

function Component({ prop }) {
    prop; // get value too :O
}

And also if you have an object of props for a component, you can spread them:

const theProps = { prop: 42 };

return <Component {...theProps} /> // same as <Component prop={theProps.prop} />

Furthermore, you don't have to destructure every prop, you can collect the rest into an object to be used normally:

function Component({ importantProp, ...notAsImportant }) {
    importantProp; // easy access and to use

    notAsImportant.prop; // you can still get the other props normally
}

Collectives™ on Stack Overflow

React list and keys, missing object properties

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related