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.

Answer 1

显然您错过了querySelector函数中的#登录。

document.querySelector('#app');