ReactJs – show another field on selection of specific value in dropdown

September 8, 2022

what I am trying is like this:

const [selectedCategory, setSelectedCategory] = useState(null);

<div className="col-12 col-lg-12 mb-3">
                    <Select placeholder="Select Category..."
                        id="selectCategory"
                        required
                        defaultValue={selectedCategory}
                        //onKeyUp={setCategory}
                        onChange={setSelectedCategory}                                                
                        options={serviceNames}
                      />
                    </div>
                    <React.Fragment>
                    <div className="col-12 col-lg-12">
                  
                    {selectedCategory.value==="other" && <input 
                        className="form-control mb-3" 
                        id="serviceCategory" 
                        type="text"
                        placeholder="Entery Category of your Serivce/business" 
                        name="serviceCategory" 
                        onChange={(e)=>setNewCategory(e.target.value)}
                         />}
                    </div>
                    </React.Fragment>

The problem I am having is – I am getting the error like
selectedCategory.value is null and page is not rendered.
if set a default value in useState('select');
then it works fine, but then the required option doesn’t work.

>Solution :

There is no value property on your selectedCategory object because it’s default is null.

Try either optionally chaining or falsy checking like this:

const [selectedCategory, setSelectedCategory] = useState(null);

<div className="col-12 col-lg-12 mb-3">
    <Select
        placeholder="Select Category..."
        id="selectCategory"
        required
        defaultValue={selectedCategory}
        //onKeyUp={setCategory}
        onChange={setSelectedCategory}
        options={serviceNames}
    />
</div>

<div className="col-12 col-lg-12">
    {selectedCategory?.value === 'other' && (
        <input
            className="form-control mb-3"
            id="serviceCategory"
            type="text"
            placeholder="Entery Category of your Serivce/business"
            name="serviceCategory"
            onChange={e => setNewCategory(e.target.value)}
        />
    )}
</div>

const [selectedCategory, setSelectedCategory] = useState(null);

<div className="col-12 col-lg-12 mb-3">
    <Select
        placeholder="Select Category..."
        id="selectCategory"
        required
        defaultValue={selectedCategory}
        //onKeyUp={setCategory}
        onChange={setSelectedCategory}
        options={serviceNames}
    />
</div>

<div className="col-12 col-lg-12">
    {selectedCategory && selectedCategory.value === 'other' && (
        <input
            className="form-control mb-3"
            id="serviceCategory"
            type="text"
            placeholder="Entery Category of your Serivce/business"
            name="serviceCategory"
            onChange={e => setNewCategory(e.target.value)}
        />
    )}
</div>

Alternatively, you could initialize your state with an empty object like this:

const [selectedCategory, setSelectedCategory] = useState({});

…but that may have unintended side effects.