React js onClick can't pass value to method

Question

I want to read the onClick event value properties. But when I click on it, I see something like this on the console:

SyntheticMouseEvent {dispatchConfig: Ob         


        

Answer 1

Below is the example which passes value on onClick event.

I used es6 syntax. remember in class component arrow function does not bind automatically, so explicitly binding in constructor.

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            
                {this.props.defaultColumns.map( (column, index) =>
                     this.handleSort(event.target.value) }>
                        { column }
                    
                )}

                {this.props.externalColumns.map((column, index)  =>
                    
                        {column[0]}
                    
                )}
            
         );
    }
}