React-Select:Get Default Value in React-Select

How to set a default value in react-select

I guess you need something like this:

const MySelect = props => (
<Select
    {...props}
    value = {
       props.options.filter(option => 
          option.label === 'Some label')
    }
    onChange = {value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

Set defaultValue in react-select functional component

You need to provide the full value object for the defaultValue to work. This should work:

export default function StateSelectDropDown(props: any) {
  return (
    <Fragment>
      <SelectState
        isSearchable
        defaultValue={USStates.find(({ value }) => value === props.state)}
        options={USStates}
        onChange={(item: any) => {
          console.log(item);
        }}
      />
    </Fragment>
  );
}

How to set default value of react-select after getting data from API

you need to have a state :

  const [currency, setCurrency] = useState([]);
    
        <Controller
                     rules={{ 
                     required: true }}
                     name="currency"
                     control={control}
                     render={({ field: { onChange } }) =>
        <Select
               onChange={(e) => {
               onChange(e)
               //handleSelect(e)
               console.log(e.target);
               console.log(e.target.value);
               setCurrency(state=>[ //change state ])
               }}
               options={[{ value: 'USD', label: 'USD $' }, { value: 'TZS', label: 'TZS' }]}
                                                                                
               defaultValue={currency}
               value={currency}
       />
       }
       />

Default value with react-select, checkboxes not working when I want to post my data having a blank page output

Here there should be the main problem:

<Dropdown
  defaultValue={TASTE.find((t) => t.label === dish.taste)}
/>

With this defaultValue prop you are only setting the value once, when the dropdown renders. The dish.taste can not be defined at that time if you retrieve its value through an async request. What you should do instead is adding a useEffect that sets the right value of the dropdown only after it has defined the dish.taste value. So:

const [valueDropdown, setValueDropdown] = React.useState(null);

useEffect(() => { 
 // here you are running this useEffect each time the dish state changes
 if(dish?.taste){ //checks if taste exists
  setValueDropdown(TASTE.find((t) => t.label === dish.taste));
 }
}, [dish]);

Now, instead of passing to the dropdown the defaultValue you should pass two new props: the value and the setValue:

<Dropdown
  value={valueDropdown}
  setValue={setValueDropdown}
/>

Lastly, with the change of the props you should also update them inside the Dropdown component and remove the state definition inside that component:

export default function CustomDropdown({
  style,
  options,
  styleSelect,
  value : selected,
  setValue : setSelected
}) {
// remove the line const [selected, setSelected] = useState(defaultValue);
....other logic
}

React select box default value sometimes not working

You only need to set value in your select and it should work:

<select key={value} name={name} value={value} ref={ref}>

An alternative is to use the selected attribute in your option:

{data.map((item, index) => (
  <option key={index} value={item.id} selected={item.id === value}>
    {item.value}
  </option>
))}

I tested both options on your CodeSandbox and they both work:
https://codesandbox.io/s/wonderful-knuth-rpnmk?file=/src/App.js

More info: How can I set the default value for an HTML <select> element?

How to set api json data to react-select default value

You can update the state to set a default value after fetching the options:

const [tags, setTags] = useState([])
const [tagsData, setTagsData] = useState([]);

useEffect(() => {
        (async () => {
            const { data } = await axios(`${process.env.REACT_APP_API_URL}/tag`);
            setTagsData(data);
            setTags([data[0]]);
        })();
    }, []);

<Select
    id="react-select-tag"
    isMulti
    options={tagsData}
    hideSelectedOptions={false}
    getOptionLabel={(option) => option.content_tag}
    getOptionValue={(option) => option.id} // using id as it is unique
    value={tags}
    onChange={(selected) => setTags(selected)}
/>

I renamed a few variables

---

Related Topics