How to set the value of a select dropdown in javascript dynamically in reactjs

Question

I have a select tag which looks like this:

    <select id="bookName"
     onChange={(event) => this.props.handleShelfChange(this.props.book, event.target.value)}>
        <option value="moveTo" disabled>Move to...</option>
        <option value="currentlyReading">Currently Reading</option>
        <option value="wantToRead">Want to Read</option>
        <option value="read">Read</option>
        <option value="none">None</option>
   </select>

So,here I am receiving props from another component. So, one of the prop is {this.props.book.shelf} .This prop has 4 values :

currentlyReading,
wantToRead,
read and
none.

So, what I want is according to the value that is coming through the props from the parent component, the value of the select option should be selected by default. How can this be done?

Prakash Sharma · Accepted Answer · 2017-11-05 19:59:38Z

1

Just pass a selected attribute to all option tags like this

<option selected={this.props.book.shelf === "read"} value="read">Read</option>

edited Nov 5, 2017 at 19:59

answered Nov 5, 2017 at 19:52

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

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

1 Comment

Pavindu Over a year ago

This doesn't work for react. See stackoverflow.com/a/21736116/8810941

kind user · Accepted Answer · 2017-11-06 10:19:13Z

0

I would suggest component-like approach.

const elems = ['read', 'wantToRead', 'currentlyReading', 'moveTo'];

export default ({ name, value, book: { shelf } }) => (
  <select>
    {elems.map((v) => (
      <Option value={v} selected={shelf} /> // value coming from prop
    ))}
  </select>
);

const Option = ({ value, selected }) => (
  <option value={value} selected={value === selected}>{value}</option>
);

Codesandbox link: https://codesandbox.io/s/x9m9nx5ynp

edited Nov 6, 2017 at 10:19

answered Nov 5, 2017 at 19:57

kind user

42k8 gold badges69 silver badges78 bronze badges

1 Comment

pranami Over a year ago

Thanks for the solution.I will give it a try :)

Collectives™ on Stack Overflow

How to set the value of a select dropdown in javascript dynamically in reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related