Set value in Select (Input) of reactstrap

Question

Code:

const [frequency, setFrequency] = useState({});

function handleSelect(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    setFrequency({
        ...frequency,
        [name]: value
    })
} 

<FormGroup>
    <Label for="exampleSelect">Select</Label>
    <Input type="select" name="select" id="exampleSelect" onChange= {handleSelect} >
    // I tried the below, But it does not seem to work
    <Input type="select" name="frequency" id="frequency" value={frequency.frequency}>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Input>
  </FormGroup>

Dropdown:

Selected value:

When I select the value it renders in the input but when I want to set the selected value.

Meaning, I want to set the value such that when I load it should start from a selected value not from 1.

So how can I set the value?

I can setState by calling some select function. But in input tag I just want a value any value so when I refresh dropdown should show xyx...1,2,3,4.

If you want to preserve state across reloading of browser windows, you need some kind of persistent storage like redis, localStorage or sessionStorage. — Gh05d
– Gh05d, Commented Mar 15, 2021 at 16:49
I have value that I want to input...it's just an example where I want to set value in the input. Say I have selected value 3...it renders in Input...but let's say if I try as : <Input type="select" name="select" id="exampleSelect" value="xyx"> On refresh Dropdown should render the value as xyz and then 1,2,3,4...so on. I just want to give value to input so it can render that value. I hope my question is clear now — Siva Pradhan
– Siva Pradhan, Commented Mar 15, 2021 at 16:54
So doesn't the Dropdown select 1 as initial value? You want it to always have "xyz" selected on load? — Gh05d
– Gh05d, Commented Mar 15, 2021 at 16:58
Dropdown does select the value and renders it.....but I always want it to be "xyz" selected on load. — Siva Pradhan
– Siva Pradhan, Commented Mar 15, 2021 at 17:03

Ajeet Shah · Accepted Answer · 2021-03-15 17:36:56Z

2

If you write value="xyx", the value of select will always be xyz no matter what option you select.

So, instead of that you can provide value from react state and a handleChange function to change the value on select.

If you want to select the "first option" i.e. xyz at start, you can initialize the state with xyz:

export default function App() {
  const [frequency, setFrequency] = useState({ frequency: "xyz" });

  function handleSelect(e) {
    setFrequency((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

  return (
    <>
      {JSON.stringify(frequency)}
      <FormGroup>
        <Label for="exampleSelect">Select</Label>
        <Input
          type="select"
          name="frequency"
          id="frequency"
          value={frequency.frequency}
          onChange={handleSelect}
        >
          <option>xyz</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </Input>
      </FormGroup>
    </>
  );
}

Here is a demo

edited Mar 15, 2021 at 17:36

answered Mar 15, 2021 at 17:13

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

3 Comments

Siva Pradhan Over a year ago

Thank you for your time, but it is not working, I have edited my question. When I pass the value it doesn't seem to have any effect. It loads from the default value only, i.e. on load it renders xyz. I just want to render selected value on reload

Siva Pradhan Over a year ago

It will render value only if i change input type to text instead of select

Siva Pradhan Over a year ago

It is working just fine...there was typo in my passed variable name which was causing the issue. Thank you for your time. Cheere :).

Collectives™ on Stack Overflow

Set value in Select (Input) of reactstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related