Using HTML Selectors with React

Question

I'm trying to use the select tag in React. I have the following component:

class InteractionHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            allDays: [],
            selected: ""
        };

        this.dateChanged = this.dateChanged.bind(this);
    }

    componentDidMount() {
        this.setState({
            allDays: ["a", "b"],
            selected: "a"
        });
    }

    dateChanged(e) {
        e.preventDefault();
        console.log(event.target.value);
    }
}

And in my render, I have the following:

render() {
    return (
        <div>
            <select value={this.state.selected} onChange={this.dateChanged}>
                {this.state.allDays.map((x) => {
                    return <option key={`${x}`} value={`${x}`}>{x}</option>
                })};
            </select>
        </div>
    );
}

However, when I select a different option, my console prints undefined instead of the option I selected. What is going on and how do I prevent it?

remove e.preventDefault()

Shubham Bhewanewala
– Shubham Bhewanewala

2018-07-18 18:58:36 +00:00
Commented Jul 18, 2018 at 18:58 — Shubham Bhewanewala
– Shubham Bhewanewala, Commented Jul 18, 2018 at 18:58
I added an answer to it below

Shubham Bhewanewala
– Shubham Bhewanewala

2018-07-18 19:05:07 +00:00
Commented Jul 18, 2018 at 19:05 — Shubham Bhewanewala
– Shubham Bhewanewala, Commented Jul 18, 2018 at 19:05

Shubham Bhewanewala · Accepted Answer · 2018-07-18 19:00:48Z

1

You are calling it wrong

dateChanged(e) {
        console.log(e.target.value);
    }

You should use prevent default in case where you donot want your page to take a refresh and try to make a server side call. In case of select there is nothing like this.

answered Jul 18, 2018 at 19:00

Shubham Bhewanewala

6076 silver badges22 bronze badges

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

Comments

katya · Accepted Answer · 2018-07-18 19:03:10Z

0

You have a typo in dateChanged(e) method. You need to log e.target.value instead of event.target.value.

answered Jul 18, 2018 at 19:03

katya

1191 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using HTML Selectors with React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related