Why {item} is OK while "item" is not?

Q1: why “item” is not OK in this challenge?
Q2:what is the difference between “key” and “props”, are “props” and “properties” the same thing? Thanks!

  **Your code so far**

const frontEndFrameworks = [
'React',
'Angular',
'Ember',
'Knockout',
'Backbone',
'Vue'
];

function Frameworks() {
const renderFrameworks = frontEndFrameworks.map((item) => <li key= "item" >{item}</li>); // Change this line
return (
  <div>
    <h1>Popular Front End JavaScript Frameworks</h1>
    <ul>
      {renderFrameworks}
    </ul>
  </div>
);
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Give Sibling Elements a Unique Key Attribute

Link to the challenge:

I’m guessing you want to set the value of key to the same value as the argument item, yes?

“item” is a string with the content literally being “item”. In other words it won’t change based on the value of the argument item.

You could illustrate this with:

const args = [
  'arg1',
  'arg2',
  'arg3'
];

for (let arg of args) {
  console.log(arg); 
  console.log('arg');
}

Here, the first console.log() will print out what is stored in the variable arg, while the second will only ever print out the word “arg”.


As for Q2, I know very little React, so can’t help much there. You could always try throwing a few console.log()s in there and seeing what value you get.

1 Like

Thanks, get it :+1: :+1: :+1:

1 Like

Like person before me replied, “item” is a string and when placed in the code, will return exactly that. On the other hand item is a variable that can hold any value i nthe current context. To know what it is, you should look where its definition is and what value its assigned. In your case, its passed as a property in the map callback, i.e. its the current element that the map is calling the callback on(one of the framework strings).
Usually, keys refer to the object keys, for example the object { name: 'Brian' }, has a key named “name”, with a value “Brian”. Object keys can often be refered as attributes too. “props” very often refers to properties you pass to functions. “properties” can also be occasioanlly refering to object keys/attributes. In react, components by default receive the so called “props” object and if you see in react something like (props) => , it does represents this notion most likely. The props(in react) is an object which carries all attributes you pass to your component(and some additional hidden attributes). Like i said, it is very often called props, but you can name it as you like, but in the end, the first argument you always get in your components, is the props object.

// we declare component...
const Heading = props => <h2 id={props.id}>{props.text}</h2>

// we use it somewhere in our code...
<Heading id='main-title' text={text} />

Notice how i can access each attribute i pass to the component with props.id. You could as well use props[“id”]. When i pass string values, i can input them directly: id="some text", or i can use a variable instead: text={someVar}.
Keep in mind, components and their props can be defined and called in different paterns, which are all just valid JS syntax:

// another way to define
const Heading = ({id, text}) => <h2 id={id}>{text}</h2>

// and another one...
// (we can name props as we like!)
const Heading = myProps => {
  const {id, text} = myProps
  return <h2 id={id}>{text}</h2>
}

// another way to call
<Heading {...{ id: 'main-title', text: "some text" }} />

// and another...

const myCustomProps = { id: 'main-title', text: "some text" }
<Heading {...myCustomProps} />

You can see how object destructuring can be very useful when working with react components
Regarding key in react, when we work with list of components(an array of components, we display in our render), React require us to give each one of them a unique"key" attribute, which is used by react to keep track of that particular component. Like in your case, as we map the list of frameworks and create a list item for every of them, we should give that li a key, which must be unique. Common practice(but occasionally not good), is to pass the element index, which always comes when working with array methods, for example:

map((item, i) => <li key={i} ...
1 Like

So “props” is the abbreviation of “properties”? I always mixed props, attributes, keys, properties and arguement. Now that I know props always are used in React and very often as an argument in the component, and keys are the name or markup of the items in the object so that the item can be tracked more concisely, and props always is the collective term of attribute, right?

It is a bit confusing, what I have tried to outline is those words can have different use cases for the context they are in and occasionally can be used interchangably. Like you mentioned, in React, “props” and “key” can carry slightly more particular meaning.

1 Like