Selected Default value in Input component reactjs

Question

I have the following code below that is loaded on a user profile page. Each user has a Planting System. When loading the code below, the application should select the user's respective Plant System. However, this is not happening because I am not able to use the selected option related to the user who loaded the page.

<Input
type="select"
name="planting_system_id"
id="planting_system_id"
value={planting_system_id}
autoComplete="planting_system_id"
className="form-control"
placeholder={apiData ? "Planting System" : "Loading..."}
disabled={apiData ? false : true}
onChange={(ev) => this.onChangeInput("planting_system_id", ev)}
>
<option value="">Select...</option>
{plantingSystemsList.map(ps => (
<option value={ps.id} key={ps.id}>
{ps.description}
</option>
))}
</Input>

And when trying to use the select in option list, there is an error on the part of React that I should use defaultValue or value instead of selected. However, I am not sure how to do this.

Tiago · Accepted Answer · 2021-04-29 11:16:41Z

1

Did you try setting the selected prop in the option item instead of the input? Something like this:

<option value={ps.id} key={ps.id} selected={ps.id === planting_system_id}>
{ps.description}
</option>

Example:

const {
  useState
} = React;

const Example = () => {
  const [optionSelected, setOptionSelected] = useState(null);


  const optionsList = [{
      value: "volvo",
      label: "Volvo"
    },
    {
      value: "saab",
      label: "Saab"
    },
    {
      value: "audi",
      label: "Audi"
    },
    {
      value: "mercedes",
      label: "Mercedes"
    }
  ];


  return ( 
  <div>
    <select name="cars" id="cars"> {
      optionsList.map(({
        value,
        label
      }) => ( 
        <option 
          key = {value}
          selected = {optionSelected === value}
          value = {value}
        >
          {label} 
        </option>
      ))
    } </select> 

    <button onClick = {
      () => {
        setOptionSelected("audi");
      }
    }>
      Set Audi as selected 
    </button> 
  </div>
  );
};

ReactDOM.render( <
  Example / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Code sandbox if you prefer: https://codesandbox.io/embed/late-sunset-jglpd?fontsize=14&hidenavigation=1&theme=dark

edited Apr 29, 2021 at 11:16

answered Apr 29, 2021 at 11:04

Tiago

3782 silver badges15 bronze badges

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

7 Comments

GKW Agro Tech Solues em Tecnol Over a year ago

I had already tried to use something like this. However, the following message occurs in the log "Warning: Use the` defaultValue` or value props on select instead of setting` selected` on option. "

Tiago Over a year ago

From your example, value is set, does it still show a warning?

Tiago Over a year ago

That input component is that written by you or a third party component? if so, can you share the documentation?

GKW Agro Tech Solues em Tecnol Over a year ago

Yes. I adjusted my code from the example above {plantingSystemsList.map (ps => (<option value = {ps.id} key = {ps.id} selected = {ps.description === planting_system_description}> {ps.description} </option>))} When setting the code as above, the value is displayed correctly, however the message "Warning: Use the` defaultValue`..."

Tiago Over a year ago

Updated the code sandbox to reflect using react-select. codesandbox.io/embed/… According to the docs, the options are a prop, then, you just need to set the value. Let me know if that helps

|

Collectives™ on Stack Overflow

Selected Default value in Input component reactjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related