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

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

#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;

#2

Do you have a link to your total project, because your onSubmit refers to a prop named handler, but I can not run it, because with only this code, this.props.handler is undefined.


#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


#6

FYI - When you post stuff on JSFiddle like you did, the app does not have access to components in your local project, so we can not run your code. Also, you can not use import like you are trying for JSFiddle projects.

In the future, please post project on Github, so we can see the full scope of the project and be able to help you faster.


#7

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