CODEWITHSUNDEEP
reactjsmaterial-ui
Clarisa Valentin
Clarisa Valentin

Reputation: 105

Material-UI MenuItems didnt show after selected

I'm using material-ui and when selected the menuitems, it didn't show up but it changes the state. here's my code

constructor(){
        super();
        this.state={
            amount: "",
        }

// Change amount of picture
        onAmountChange = (event) => {
            this.setState({ [event.target.name]: [event.target.value]})
        }

render(){
        const { classes } = this.props;
        const { amount  } = this.state;

        return(
            <div>
                <div>

                    <FormControl>
                        <InputLabel htmlFor="amount-pic">Amount</InputLabel>
                        <Select
                            value={amount}
                            onChange={this.onAmountChange}
                            name= 'amount'

                        >   
                            <MenuItem value={5}>5</MenuItem>
                            <MenuItem value={10}>10</MenuItem>
                            <MenuItem value={15}>15</MenuItem>
                            <MenuItem value={30}>30</MenuItem>
                            <MenuItem value={50}>50</MenuItem>
                        </Select>
                    </FormControl>
                </div>
                <br/>
            </div>


        );  
    }

there's no error showing and it worked to change the state amount, the number just didnt show when i selected.

Upvotes: 2

Views: 472

Answers (1)

Thanh Ngo
Thanh Ngo

Reputation: 365

The mistake is your function onAmountChange: the value is event.target.value, not [event.target.value]. Because [event.target.value] is an array

onAmountChange = (event) => {
    this.setState({ [event.target.name]: event.target.value})
}

Upvotes: 1

Related Questions