Rendering multiple buttons with onClick function in React

Question

I am trying to render multiple buttons in react using map but i am getting an errors.

var NameArray = [{"name":"number0"},{"name":"number1"},{"name":"number2"}];

class RenderButtons extends React.Component {
  constructor() {
    super();
    this.onClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const {id} = event.target;
    console.log(id);
  }
  
  render() {
    return (
      <div>
         {NameArray.map((obj, index) =>
        <h3 id={index} onClick={this.onClick}>
          {obj.name}
        </h3>
      )}
        
      </div>
    );
  }
}

ReactDOM.render(
<RenderButtons />, 
document.querySelector('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

I am using index as Id for my buttons and NameArray properties as name of the buttons.

I tried spliting render of buttons to new function but i am not sure how to do this.

kind user · Accepted Answer · 2017-11-18 15:13:31Z

3

Apparently you miss # sign in your querySelector function.

document.querySelector('#app');

edited Nov 18, 2017 at 15:13

answered Jul 16, 2017 at 21:05

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

AESTHETICS Over a year ago

I am doing this for too long <.<.

Collectives™ on Stack Overflow

Rendering multiple buttons with onClick function in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related