Can't update the state on this React Component

Question

I want the select tag to update the selected value with the state.value prop according to this React document .

The parent Component is passing title as props to this Component, the problem is that I'm getting this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

And I don't understand why is looping recursively. Would you please help me with this?

import React, {Component} from 'react'

class BookShelfChanger extends Component {
    state = {
        value: '',
        isMounted: false
    }

    componentDidMount() {
        this.setState({ isMounted: true })
    }

    checkOptions(title) {
        if(!this.state.isMounted) return

        let val;

        switch(title) {
            case 'currentlyReading':
                this.setState({ value: title})
                val = 'Currently Reading'
                break

            case 'wantToRead':
                this.setState({ value: title})
                val = 'Want To Read' 
                break

            case 'read':
                this.setState({ value: title})
                val = 'Read'
                break
            default:
        }
        return val
    }

    render() {
        return (
                <select value={this.state.value} onChange={this.checkOptions}>
                    <option value="move" disabled>Move to...</option>
                    <option value="currentlyReading">{this.checkOptions(this.props.title)}</option>
                    <option value="wantToRead">{this.checkOptions(this.props.title)}</option>
                    <option value="read">{this.checkOptions(this.props.title)}</option>
                    <option value="none">None</option>
                </select>
        )
    }
}

export default BookShelfChanger

Answer 1

You should not call setState inside your render function. This would lead to infinite loop of calling setState. Whenever you setState, React re-renders, if you call setState inside render, then it would lead another render which would again lead to setState and loop continues. Thats why you are seeing the error. Instead you can try following:

 checkOptions=(event, )=>{

    let val;
    console.log(event.target.value) // Gives you the selected option's value

}

render() {
    return (
            <select value={this.state.value} onChange={this.checkOptions}>
                <option value="move" disabled>Move to...</option>
                <option value="currentlyReading">currentlyReading</option>
                <option value="wantToRead">wantToRead</option>
                <option value="read">read</option>
                <option value="none">None</option>
            </select>
    )
}

Answer 2

You need to bind the onChange to your component or else this.checkOptions runs whenever the component is rendered. checkOptions causes the component to update which leads to the infinite loop.

Try this:

<select value={this.state.value} onChange={this.checkOptions.bind(this)}>