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.
      />
    );
}