score:0

you can try something like this in a class component(but the idea is similar for a function component):

   getfilteredoptions() {
        
            return this.state.deps.filter(dep => dep.departmentname.length > 6).map(dep =>
            <option key={dep.departmentid}>{dep.departmentname}</option>
            );    
        }
    
    
   render() {
        return ( <form.group controlid="department">
        <form.label>
            department
        </form.label>
    
        <form.control as = 'select'>
            {this.getfilteredoptions()}
        </form.control>
    
    </form.group>);
}

i usually create a method to abstract this complexity just so that i can "decouple it" from the "html/tsx/jsx" part.

the idea is that in this case i am using only the items which have a department name with a length greater than 6 characters.... so you can just replace that condition with whatever condition you want.

remeber that in a function component things might look a bit different.

but without see the complete component code it's hard to say.


Related Query

More Query from same tag