MaterialIU MenuItems не отображается после выбора

Question

Я использую material-ui, и при выборе пунктов меню он не отображается, но меняет состояние. вот мой код

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>


        );  
    }

ошибка не отображается, и она работает для изменения суммы состояния, число просто не отображается, когда я выбрал.

Answer 1

Ошибка вашей функции onAmountChange: значение event.target.value, а не [event.target.value]. Потому что [event.target.value] это массив

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