Following is the Select in my withFormik Form. Which is working fine.

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={setFieldValue}
/>

But now on the basis of value selected I need to add/remove class from the select. so I tried e but it is returning the field name only

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={e => {
        console.log(e) // => userList
    }}
/>

I even tried this but no luck

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={(field, value) => {
        console.log(field) // Response => userList
        setFieldValue(field, value)
    }}
/>

How can I access the event in onchange as on the basis of value I need to add / remove class from the select. Something like -

handleChange = e => {
    // Here e is refering to the Select
    if (e.target.value) {
      e.target.classList.remove("gray");
      e.target.classList.add("black");
    } else {
      e.target.classList.remove("black");
      e.target.classList.add("gray");
    }
  };

Following is the Select in my withFormik Form. Which is working fine.

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={setFieldValue}
/>

But now on the basis of value selected I need to add/remove class from the select. so I tried e but it is returning the field name only

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={e => {
        console.log(e) // => userList
    }}
/>

I even tried this but no luck

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={(field, value) => {
        console.log(field) // Response => userList
        setFieldValue(field, value)
    }}
/>

How can I access the event in onchange as on the basis of value I need to add / remove class from the select. Something like -

handleChange = e => {
    // Here e is refering to the Select
    if (e.target.value) {
      e.target.classList.remove("gray");
      e.target.classList.add("black");
    } else {
      e.target.classList.remove("black");
      e.target.classList.add("gray");
    }
  };

• javascript
• reactjs
• ecmascript-6
• onchange
• formik

Share Improve this question Follow asked Aug 29, 2019 at 6:30 NeshNesh 2,57199 gold badges4040 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

<Select /> as a controlled ponent would require the value prop to use the state's selected value.

value prop is not meant for the <option> values.

Thus, you can have something like:

state = {
  selected: '',
}

handleChange = e => {
  const selected = e.target.value; // selected name
  switch(selected) {
    // change class
  }
  this.setState({
    selected
  });
}

<Select value={this.state.selected} onChange={handleChange}>
 {userList.names.map(user =>
   <options value={user.name}>{user.name}</option>
 )}
</Select>