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

Answer 1

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
}