Can't get value from HTML tag attribute "value" to onClick script

Question

I suppose to have some value from <button> tag but it is undefined when I click the button. What am I doing wrong?

I use function(e) to get attributes and then e.value = undefined.

runTest(elem){
    let url = 'someUrl';
    let path = elem.value;
    console.log(path);
    $.post(url, {
        path: path
    }, function(data, status){
        alert('Data: ' + data +  "\nStatus: " + status);
    });
}

render() {
    return (
        <div className='wrapper'>
            <div className="btn-group dropright">
                <button type="button" className="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Wraith
                </button>
                <div className="dropdown-menu">
                    <button className="dropdown-item" value='someValue' onClick={this.runTest}>Get value</button>
                </div>
            </div>
        </div>
    );
}

onClick listener receives event object as argument, not DOM element. — hindmost
– hindmost, Commented May 6, 2019 at 15:29
this is not the way react apps usually work. better set that value to the props of your component and do something like <button className="dropdown-item" value={this.props.someValue} onClick={this.runTest}>Get value</button> — messerbill
– messerbill, Commented May 6, 2019 at 15:30

Bernard Pagoaga · Accepted Answer · 2019-05-06 15:30:03Z

2

The onClick event fires an event.

So it's the event which is passed to your runTest function, not the element.

runTest(event) {
    console.log(event.target.value)
}

answered May 6, 2019 at 15:30

Bernard Pagoaga

1,4361 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't get value from HTML tag attribute "value" to onClick script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related