React onClick component execute function

Question

I am dynamically rendering react components as:

{map.call(this.state.text, (c, i) => (<Char
              click={() => this.deleteCharHandler(i)}
              charVal={c}
              key={i}/>))}

Where there render method of the Char component is:

 render() {
        return(
            <div className="char" onClick={this.props.click}>
                {this.props.charVal}
            </div>
        )

That works and deleteCharHandler is appropriately called with the correct value of i.

However, I would like to avoid having to pass the handler function as a prop. After all, onClick of the div is simply executing the click property, which is an anonymous function calling deleteCharHandler. I tried to refactor as:

{map.call(this.state.text, (c, i) => (<Char
              onClick={() => this.deleteCharHandler(i)}
              charVal={c}
              key={i}/>))}

Thus adding a react event listener to the Char element. And removed the onClick listener from the div in the Char component.

...And it doesn't work.

Why? Am I not just moving the onClick listener one level up?

Answer 1

You must note that passing any function to a React component is just passed down as a prop and not treated as a event listener. In order for the onClick to work it needs to be passed on to the DOM

Now either you can explicitly pass it on to div within Char component like do

 render() {
    return(
        <div className="char" onClick={this.props.click}>
            {this.props.charVal}
        </div>
    )

or you can destructure the other values and pass on the rest values using rest spread syntax. Either way you need to pass the handler to the DOM element

render() {
    const {charVal, ...rest} = this.props; 
    return(
        <div className="char" {...rest}>
            {charVal}
        </div>
    )

The above method gives you the flexibility to pass on props required to the div element without having to mention them explicitly. However you must be careful that you aren't passing non required values to the div element