how to set value in dropdown in react js?

Question

could you please tell me how to set value in dropdown in react js ? I am getting dropdown data after few seconds 3000 and then I need to set value on dropdown

const App = ({ children }) => {
  const val = "ax";
  const [state, setState] = useState([]);
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      <Example countryOptions={state} />
    </Container>
  );
};

https://codesandbox.io/s/semantic-ui-example-utev4 expected output Aland Islands should be selected. { key: "ax", value: "ax", text: "Aland Islands" },

as after three second I want to select this element

const val = "ax";

Updated my answer, due to Stavros answer. It's better to keep what value is selected by default in the App component. — HMR
– HMR, Commented Aug 23, 2019 at 8:32

HMR · Accepted Answer · 2019-08-23 08:27:21Z

2

As stavros answer suggested; it may be better to keep state in App component and pass the setVal to the dropdown:

App:

const App = ({ children }) => {
  const [state, setState] = useState([]);
  //added val and setVal in App state
  const [val,setVal]=useState('ax');
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      //pass val and setVal so dropdown can set val on change
      <Example countryOptions={state} val={val} onChange={setVal}/>
    </Container>
  );
};

Dropdown:

const DropdownExampleClearableMultiple = ({ countryOptions,val,onChange }) => (
  <Dropdown
    clearable
    fluid
    search
    closeOnChange
    selection
    options={countryOptions}
    //set value to passed in val
    value={val}
    //use setVal that was passed in as onChange
    onChange={(_,i)=>onChange(i.value)}
    placeholder="Select Country"
  />
);

edited Aug 23, 2019 at 8:27

answered Aug 23, 2019 at 8:18

HMR

39.5k26 gold badges99 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stavros Angelis · Accepted Answer · 2019-08-23 08:17:21Z

1

You should update your question because only after visiting the codesandbox was I able to get enough info for an answer..

In your index.js you should update setState(countryOptions) to :

setState({countryOptions:countryOptions},()=>setState({val:"ax"})

Then line 39 to :

<Example countryOptions={state.countryOptions:countryOptions} val={state.val} />

Then in your example.js update const DropdownExampleClearableMultiple to:

const DropdownExampleClearableMultiple = ({ countryOptions, val }) => (
<Dropdown
  clearable
  fluid
  search
  closeOnChange
  selection
  options={countryOptions}
  placeholder="Select Country"
  value={val}
/>
);

answered Aug 23, 2019 at 8:17

Stavros Angelis

9725 silver badges8 bronze badges

3 Comments

HMR Over a year ago

Good answer but OP uses hooks. So OP should create a hook for value const [val, setVal] = useState(); and pass val to the component val={val} Also the user cannot change the input unless you pass onChange with value of setVal: onChange={setVal}

Stavros Angelis Over a year ago

You are right. OP should update the dropdown and make it controlled but my understanding is that he/she doesn't have a good understanding of what he/she is doing here so I tried not to add more confusion.

HMR Over a year ago

I updated my answer, it would be better to keep state in App component and pass onChange from App

Edward · Accepted Answer · 2019-08-23 08:16:33Z

0

Use the "value" prop.

// index.js
const App = ({ children }) => {
  const val = "ax";
  const [state, setState] = useState([]);
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      <Example countryOptions={state} value={val} />
    </Container>
  );
};

// example.js
const DropdownExampleClearableMultiple = ({ countryOptions, value }) => (
  <Dropdown
    clearable
    fluid
    search
    closeOnChange
    selection
    value={value}
    options={countryOptions}
    placeholder="Select Country"
  />
);

answered Aug 23, 2019 at 8:16

Edward

7365 silver badges6 bronze badges

1 Comment

HMR Over a year ago

Now the user cannot change the value of the dropdown as you never update val on change.

Shubham · Accepted Answer · 2019-08-23 08:19:43Z

0

You can pass value to value property of Dropdown. Use state property for selected value. Make sure that you change/update state on onchange event.

answered Aug 23, 2019 at 8:19

Shubham

12 bronze badges

Collectives™ on Stack Overflow

how to set value in dropdown in react js?

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related