react map方法-分别放置回调函数并发送参数

Question

The map method takes a callback function as I've understood it. Normally you would put the function inside map:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

But in my project I call the function as a separate component:

{ tabs.map( myFunction ) } 

here is the myFunction component:

const myFunction = (item) => {

    return(

        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
    );
}

The "item" from map seems to be passed automatically.

The problem is that I need to pass an extra variable - how do I do it? This doesn't work:

{ tabs.map( myFunction(myvariable) ) } 

nor:

{ tabs.map((styles) => myFunction ) } 

So I'm unsure how to pass the variable..and still get the "item" passed as well.

Answer 1

Solution is:

{ tabs.map((tab) => myFunction(tab, myvariable)) }

Also note that

const myFunction = (item) => {

    return(

        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
    );
}

could be refactored into

const myFunction = (item) => (
        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
);