javascript - Resetting state of react-select component not working

Question

I am having two problems with my react-select component:

1st: when I select and option, I am not able to change the option after I set the select component 2nd: when my form resets, it does not reset the react-select component.

For practical reasons, this is just pertaining the issue itself so I left of other input fields on purpose and to keep this short as much as possible

Below is a sample of what I am working with. I used a async request to grab my options from a api, and the good news is the option populate. The issue I am having is once I pick a option I cannot change it, and when I submit the form, all the other fields and not the select component reset. I have to reload the page for the component to reset. What can I do to correct this?

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'
import '../index.css'



class RecipeInput extends Component{

   
    constructor(props){
        super(props)
        this.state = {
            category_id:'',
            name:'',
            ingredients:'',
            chef_name:'',
            origin:'',
            instructions:'',
            
         }
        
}


      

    
    async options(){
        const BASE_URL = `http://localhost:3002`
        const CATEGORIES_URL =`${BASE_URL}/categories`
        const res = await axios.get(CATEGORIES_URL)
        const data = res.data

        const options = data.map(options => ({
            'label' : options.category,
            'id' : options.id
        }))

        this.setState({category_id: options})
    }



    
     handleSelect = (event) =>{
        
        this.setState({category_id:event.id})
    }

    componentDidMount(){
        this.options()
    }


    handleReset = () =>{
        this.setState({ name:'', ingredients: '', chef_name: '', origin: '',instructions: '', category_id:''})
    }

   

    handleSubmit = (event) =>{
        event.preventDefault();
        this.props.postRecipes(this.state)
        this.handleReset()
              
    }

    

    render(){
       let dropdown = 'form-select form-select-sm'
        return(
            <div>
                
                <form onSubmit={(event)=>this.handleSubmit(event)} noValidate>
                    <Select  options={this.state.category_id} value={this.state.category_id} onChange={(event)=>this.handleSelect(event)} className={dropdown}/>
                   
                    <input value='submit' type='submit' />
                </form>
                
            </div>
        )
    }

}

export default RecipeInput

question from:https://stackoverflow.com/questions/66056757/resetting-state-of-react-select-component-not-working

Answer 1

I think you are using same category_id state variable for both options array and value prop on select element. You need to provide options array to option property And category_id state variable that will be changing to value property.