Dynamic button output React.js

Question

I am about to build a small WebApp with react for personal use and for some experience :)

I want to work with the users input -> depending on how many positions he will fill out, the amount of possible "tabs" or "buttons" will vary

For this example I've created an array state called "data".

I'd like to ask you if theres a better way to handle this situation, and how would you deal with the handling of an action if one of these buttons will be clicked ?

simple vanilla event listener and then continue in react within that function or comepletly different ?

Shall I create an onClick={this.someFunc} simultaniously to every button that gets created?

Heres my tiny react code: http://pastebin.com/eseYdr3G

Please include the code in the question rather than linking out to it. Also, it's not clear what you're asking. You can just create a loop that creates the number of Components needed. I'd expect that you'd have a handler for onClick with the button and then perform the necessary action. — WiredPrairie
– WiredPrairie, Commented Mar 11, 2015 at 12:19
Thank you for your Anwer. I tried to paste the code sample in here but it wouldn't let me. Always told me "it looks like you have some bad formated code in here" or so. I ve reedited my Question. — noa-dev
– noa-dev, Commented Mar 11, 2015 at 13:04

Joel Auterson · Accepted Answer · 2015-03-15 18:19:38Z

3

I think you've got the right idea. When you create the button, you could set its id to the right name, and set its click callback, like so:

return <button id={i[0]} onClick={this.handleClick}>{i[0]}</button>

(In this case the ID is the same as the name, but you can do it however you like.)

Then you'd have your handler inside the class:

handleClick: function(e) {
  e.preventDefault();
  var buttonName = e.target.id;
  // buttonName is the name of the button clicked
}

answered Mar 15, 2015 at 18:19

Joel Auterson

7281 gold badge7 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Dynamic button output React.js

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