[React.js]Problem with setting state from category select

JavaScript
1

Hello Campers :grin:
I have a problem with setting the state with values from select tag.
Link for jsfiddle: https://jsfiddle.net/n5u2wwjg/119549/
Thanks!

import React, { Component } from 'react';
import styles from './add.css';

class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount: '',
            description: "",
            date: new Date().toLocaleDateString() + " at " + new Date().toLocaleTimeString() ,
            category: ""
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({[event.target.name]: event.target.value}); 
    }
          
    render() {
        
        return (
            <form onSubmit={(event)=> this.props.handler(event ,this.state.amount, this.state.description, this.state.date, this.state.category)}>
                <p className={styles.inputInfo}>Please, enter an amount:</p>
                <input className={styles.input} 
                        value={this.state.amount} 
                        name="amount"
                        onChange={this.handleChange}
                        type="number" 
                        placeholder="Enter your amount" />
                <input className={styles.input}
                        name="description"
                        onChange={this.handleChange}
                        placeholder="and enter description"
                    />
               
               <select name="category" value={this.state.category} onChange={this.handleChange}>
                     <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">Mango</option>
                </select>
                 <button className={styles.btn}> Add value </button> 
   
                
            </form>
        );
   }
}

export default Add;
3

I also could not get your fiddle to work. I reduced it and converted it to a pen, and it seems to work just fine.

Here is a working pen.

4

https://jsfiddle.net/189swzmx/
I see now that it is working, but first option can’t render (“Grapefruit”). The rest is ok.

5

I figured it out. Just added this:

<option value="">Select your option</option>

in the first line

7

Yeah I know. I thought that a snippet will be enough. Thanks for tips :smile: