List generated in constructor not calling event handler - reactjs

Question

I am generating a list on elements inside the constructor and rendering it inside render function. I am properly binding this to the event handler, but still not able to call the event handler. I have created a codepen
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App boxes="9" />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import Box from './Box';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.play = this.click.bind(this);
this.boxes = [];
for (let i = 0; i < props.boxes; i++) {
this.boxes.push(<Box key={i} onClick={this.play} />);
}
}
click() {
console.log('called click');
}
render() {
return <div className="App">{this.boxes}</div>;
}
}
export default App;
However it works fine if I bind the onClick function inside the render function, or even when I call the onClick prop inside Box.js
Box.js
import React, { Component } from 'react';
import './Box.css';
class App extends Component {
render() {
return <div className="box">{this.props.display}</div>;
// return (
// <div onClick={this.props.onClick} className="box">
// {this.props.display}
// </div>
// ); -- this helps me trigger the event handler on App component
}
}
export default App;
Can you help me add the event handler without specifying the onclick handler twice i.e on both App component and Box component

Answer 1

Can you help me add the event handler without specifying the onclick
handler twice i.e on both App component and Box component
You have to specify it twice, once to give the function to the Box component, and second time, to let the Box component decide when to call that function; this is what you do in your second example, which is commented out.
Otherwise, how do you imagine it specifying it only once?

Answer 2

I suggest to strore the boxes in the state and refer the onClick within the render method, not in constructor.
You can completely get rid of constructor btw simply using arrow functions as methods.
const Box = ({onClick, label}) => (
<div onClick={onClick}>{label}</div>
)
class App extends React.Component {
state = {
boxes: [
{id: 1, label: 'Box label 1'},
{id: 2, label: 'Box label 2'},
]
}
handleClick = () => {
console.log('box click');
}
render() {
const { boxes } = this.state;
return (
<div className="App">
{boxes.map(box => (
<Box key={box.id} label={box.label} onClick={this.handleClick} />))}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>