React - passing component prop in click handlers passed as props

user_5012866 0
Viewed 346

I am new to React. I have a react component Child like this -

//this.props has obj = {'id': 123, 'name': 'abc'}
class Child extends React.Component{

    constructor(props){
        super(props);
    }
    render(){
        return(
            <div onClick={this.props.remove}></div>
        );
    }
}

This component is being used from some Parent component which has a list of such Child component, each having their own this.props.obj. this.props.remove is another handler passed to Child from Parent.

Now, on click of div redered from Child component, I want to pass this.props.obj.id in remove function. How can I do that.

Thanks

reactjs javascript
2 Answers

Welcome to React!

You can learn about event handlers here

I would write it up like this;

class Child extends React.Component{

    constructor(props){
        super(props);
    }

    handleClick({id}) {
       this.props.remove(id)
    }

    render(){
        const obj = this.props
        return(
            <div onClick={() => this.handleClick(obj)}></div>
        );
    }
}
user_24056890

You can use arrow functions to achieve this.

class Child extends React.Component{

    constructor(props){
        super(props);
    }
    render(){
        return(
            <div onClick={() => this.props.remove(this.props.obj.id)}></div>
        );
    }
}
user_49044540
Related