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} ...
