score:1
Accepted answer
the argument type for onchange
changes when the react-select
receives ismulti
from a single object to a list of objects. when using ismulti you don't need to destruct; the first parameter is the value.
you also want to make the react-select
a controlled component by managing its value
.
export default function selectfield(props) {
const [field, state, { setvalue, settouched }] = usefield(props.field.name);
// value is an array now
const onchange = (value) => {
setvalue(value);
};
// use value to make this a controlled component
// now when the form receives a value for 'campfeatures' it will populate as expected
return <select {...props} value={state?.value} ismulti onchange={onchange} onblur={settouched} />;
}
the new value is an array of the selected options with label and value fields. if you want to store just the value you'll need to map it to a value and modify the react-select
to handle that
Source: stackoverflow.com
Related Query
- Issue in validation in react autocomplete in multiple select using formik
- How to receive select value in handlesubmit function with formik react js?
- React Select - Multi Select custom way to display multiple options
- How to access values from React Select and pass them to Formik values on Submit?
- React | Single onchange method for multiple dynamic select box
- React - Select multiple checkboxes holding Shift key
- React js Multiple Select [object Object], [object Object]
- Dynamically Select Options From Multiple Select Dropdown With Reactstrap In React js
- react one state variable depends on multiple other states variables
- React MUI Multiple Select with Checkboxes not Check marking Initial Selected Options
- React render siblings on Multiple Select Material UI
- Get options from multiple select form in React
- React Material UI 1.0 Select multiple params onChange
- How can I handle the multiple select box in react in a single state
- Select multiple buttons and adding removal icon if more than one selected - React Hooks
- React cannot choose from select multiple form
- There is a problem in making multiple select boxes with react and type scripts
- Properly handle multiple files input with Formik and React
- How can i get multiple select options in react js.?
- Event propagation and multiple state change in react select dropdown
- MaterialUI DropDownMenu Multiple select using react
- React - Material-UI - How to use Select with multiple values inside react-hook-form
- React Select menu - Select multiple items - Advanced
- React selected options for multiple select
- React Select not showing errors when validating with Formik and Yup
- How should I manage multiple select fields dynamically added in React JS?
- React formik and select array to string Convert onSubmit
- React Select not allowing multiple selections
- How to reuse a function for multiple select options that only use a single event handler in React
- React Select All for multiple checkboxes
More Query from same tag
- Error with Redux DevTools Extension using TS: "Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."?
- Why it fails when I try to use match parameter from props object in my functional component?
- (React) How can I stop my web app from re-rendering when I fetch some data from an API?
- How to set pseudo selector on hover with styled-components
- Dispatch overrides the full store in React Js
- dj-rest-auth token not deleted in backend after logout
- connectiong wizard to redux
- Why is my ReactJs button not found by getElementById
- How to specify image local path in img src to load in react/JavaScript
- Transferring data from one state object to another while using React context in a Next.js app
- React state is not being updated by my call to the API
- Next.js not auto refreshing
- How to handle images in a Rails / Webpacker / React app?
- How to make translation runtime
- OnDelete Function does not work in react Task Tracker
- Template doesn't react to the change of variable React
- Yup Was Not Working With Formik and also not provide any type of error
- How to insert <br/> into a javascript string
- Is there a way to use `event.target` to target specific sub-components and alter their style?
- Best method to combine defined props in React component
- Component has updated but no visual change
- Is there any solution to mock react-query's useQuery and useMutation while working with react testing library
- How to pass variable as a parameter in api call fetch in javascript, react native
- Type has no properties in common with type 'ColumnType<any>'
- Using setTimeout in setState callbacks
- Function implicitly has return type 'any' error
- Material UI - Facing an issue that drop down options are coming below the modal window footer
- disabling few buttons from group of buttons React
- React App: Why I get an error when I try to run npm start script?
- Typescript error on ant design version 3.0 form