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.
Source: stackoverflow.com
Related Query
- filter option in form control select dropdown
- Filter option in form select in React js
- How to display selected option in select dropdown in React JS edit form
- ReactJS - trigger event even if the same option is selected from select dropdown
- React form hooks How to validate select option
- select option from dropdown using API and get that selected value but i am getting last value which i have not selected in react
- Select option child component not reseting to key 0 on form submit with reactjs
- Why arrow key navigation doesn't work (or focus) in Dropdown in React Select when the option is modified?
- react search filter with select option
- 2 dropdown select option iterating through same array but should not be able to select same selected value (ReactJS)
- React: Perform different operation depending on select option dropdown
- ReactJS change color of the selected option in a select option control
- select dropdown option set to default when click reset button on react js
- "defaultValue" in react-select does not select option in dropdown but "value" select the option in dropdown
- React search filter using select option and useRef
- How to Add input fields in form when "Other" option is selected in dropdown in React.js
- React Select dropdown onChange filter and reset to previous/original state?
- Bulma Select form element - how to detect "select" or change event when an option is selected
- Filter out array to get out unique values and populate a select dropdown box
- Get multiple values from the same select dropdown form field in React
- How search the option from select dropdown which search from first letter using antd?
- how pass input props of redux form to custom select dropdown
- Select option from dropdown and display in box
- React filter array of object based on select dropdown list value
- Semantic react ui dropdown multiple selection: option to Select All
- Filter data using select dropdown in react table
- Created select option from state not updating form json unless clicked
- Select form using option values from NodeJS database
- React select - How to filter selection based on picked option of other selection field?
- Update two objects if specific select option is chosen in drop-down for React Create Form
More Query from same tag
- showing details of a record using ReactJS
- Jest - test method that passes to child component
- How to Handle Redirecting to the Same Route (with Query Params) Using React Router v4
- how to not duplicate react i18next in each component
- How can I translate dynamic comma-seperated lists with react-18next?
- React + Firebase Empty Array
- How to set up ReactJS app on IIS properly?
- Cannot read property 'initSdk' of undefined - Appsflyer integration React Native
- window.history.back() not being called - jest enzyme
- How does react keep variables value in useCallback?
- onClick called on render
- Bootstrap v4 popover not updating on state change in React
- Yarn Workspaces And Webpack Hot Module Reloading React App
- async axios get call axios returns nothing
- Using arrow function with curly braces and ternary operator for setState's callback error?
- Jest spyOn is not a function
- How can I make my React app only render when an expensive calculation is finished?
- typescript .d.ts module for images not working
- React native: Always running component
- Add and remove score with React
- Electron react app hot reloading from src folder not working
- npm test -- --coverage never exits
- Cannot return the content from a nested array in React JS
- Looping ant design tag color in React Js
- undefiined useContext destructure
- Button Click In React
- How to efficiently pass the same "prop" to every stateless presentation component?
- React Router Navigation in multi step form
- How to use substring (or cut strings) in React
- Page refreshes on subsequent submits