Using an Array of buttons in React

Question

In react I have a code like this:

 var myButtons=[];
 /*Products is an array of objects where each object identify a product*/
 for (var p of Products) {
     var button = <button 
                       style={someStyle}
                       onClick={onClickFunction}>
                       p.name
                  </button>
     myButtons.push(button)
 }

I will use this react array of buttons on a render command. The problem I have is that I do not know how to make one of these buttons to show its label p.name through the onClickFunction.

so, should I use: var button = <button style={someStyle} onClick={p.name => onClickFunction(p.name)}> p.name </button> — Jose Cabrera Zuniga
– Jose Cabrera Zuniga, Commented Mar 19, 2018 at 19:55
You can definitely do it like that, however, I'd suggest reversing your logic. You're iterating the products, but call a function that returns a <button> so that you can do something like: <div>{Products.map(makeButton, this)}</div> which will pass the data variable along into the callback. Much cleaner — Sterling Archer
– Sterling Archer, Commented Mar 19, 2018 at 19:59

Sterling Archer · Accepted Answer · 2018-03-19 20:02:08Z

4

A simpler more user friendly way is to iterate the data with a function. (note that this does not take into account scope, so this may be needed if it's inside a component)

function makeButton(data) {
    return (
        <button 
            style={someStyle}
            onClick={() => onClickFunction(data.label)}> //pass parameter for callback here if binding isn't used
            data.name
        </button>
    );
}

Now you can simply use a binding map inside your div!

<div>
    {Products.map(makeButton, this)}
</div>

answered Mar 19, 2018 at 20:02

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

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

Comments

benjamin Rampon · Accepted Answer · 2018-03-19 19:58:25Z

1

You can add your label as paremeter :

<button style={someStyle} onClick={p.name => onClickFunction(p.name)}>
    p.name
</button>

And :

onClickFunction = (label) => () =>{
    console.log(label)
}

answered Mar 19, 2018 at 19:58

benjamin Rampon

1,4281 gold badge13 silver badges19 bronze badges

Comments

FisNaN · Accepted Answer · 2018-03-19 20:22:06Z

1

The easiest way is to use ES6 syntax and array map.
The name property should be unique, and don't forget provide a key for each button:

const myButtons = Products.map(p => (
  <button style={someStyle} onClick={e=>{ this.onClickFunction(e, p.name); }} key={p.name}/>
    {p.name}
  </button>
));

Using an arrow function, so it doesn't require .bind(this). Add e.preventDefault() to prevent default behavior, if the buttons are in a form.

onClickFunction = (e, name) => {
  e.preventDefault();
  // Your button behavior goes here.
}

answered Mar 19, 2018 at 20:22

FisNaN

2,9152 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Using an Array of buttons in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related