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.

CodePudding user response：

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>

or

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.