CODEWITHSUNDEEP
javascriptreactjs
Galivan
Galivan

Reputation: 5328

react map method - put callback function separately and send arguments

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.

Upvotes: 0

Views: 391

Answers (1)

Alex Antonov
Alex Antonov

Reputation: 15156

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

Upvotes: 1

Related Questions