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?

Looks like apples and oranges to me. On one hand you're looking at a single element of `props.options` and on the other you're looking at all of `props.options`. What do you mean by "it doesn't work" exactly? — ggorlen, Aug 25 '19 at 01:46
I think there's some confusion to where the variable in renderOptions is coming from. map is providing the key arg. Also, what is the value of props.option as it looks undefined. — Ian Brindley, Aug 25 '19 at 01:50
@ggorlen I don't get any error in the console or on the screen. — Somename, Aug 25 '19 at 01:57
Instead of `key` argument you can use `props` and then use `props.option`. — ravibagul91, Aug 25 '19 at 02:59

kyun · Accepted Answer · 2019-08-26T04:05:50.793

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

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

1 Answers1