Passing props in map function doesn't work. Passing it as key works

Question

I'm passing an array as props from the App.js to Component B. The array:

myOptions: [
{
    id: 1,
    option: "Option1"
},
{
    id: 2,
    option: "Option2"
},
{
    id: 3,
    option: "Option3"
}
]

From the App.js I'm passing it to Component B:

<ComponentB 
    options={this.state.myOptions}
/>    

ComponentB:

import React from 'react';

import ComponentC from './ComponentC';


function ComponentB (props) {

  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
}

    return (
        <div>
        <h3> ComponentB </h3>
        {props.options.map(renderOptions)}
      </div>
    );

}

export default ComponentB;

The ComponentC only displays the optionContent:

import React from 'react';

function ComponentC(props) {
  return (
    <div>
        {props.optionContent}
    </div>
  );
}

export default ComponentC;

Although the code works correctly, I'm not sure why in the renderOptions function, I need to use key.option to pass the optionContent={key.option} prop. When I use props.option, it doesn't work.

Is it because the renderOptions function is nested in the ComponentB function?

Answer 1

First, you should understand how map() works.

In your code,

function ComponentB (props) {
  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
  }
  return (
      <div>
      <h3> ComponentB </h3>
      {props.options.map(renderOptions)}
    </div>
  );
}

You use the map() like this {props.options.map(renderOptions)} and it looks okay.

But you should know something about map()'s arguments.

you can read it

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Normally, map() has 3 arguments and be used 2 of them. currentValue and index.

and, return to your code again.

you passed your function renderOptions() itself.

it means renderOptions() can get all arguments from map()

You can touch currentValue, index and other things.

But, renderOptions() has only one argument key.

(If you want to touch all arguments you should write like this function renderOptions(v, i, arr) )

So, you can touch only key as currentValue.

and currentValue has each item of Array.

{
    id: 1,
    option: "Option1"
}

You have to rewrite your code like that.

function renderOptions(v,i,arr) {
    return(
      <ComponentC
        key={v.id} // because the key should be unique.
        optionContent={v.option} 
        answers={arr} // Actually, I don't understand this purpose.
      />
    );
}