react map method - put callback function separately and send arguments

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.

Alex Antonov · Accepted Answer · 2018-04-12 12:04:19Z

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

answered Apr 12, 2018 at 12:04

Alex Antonov

15.4k10 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react map method - put callback function separately and send arguments

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related