React.js: React dropdown does not hold data

Question

I would like to ask why does my dropdown can't hold the value after selecting.

ClientMaintenancePage.js

/* Dropdown */
const optionsBrstn = [
   'BIC', 'BRSTN', 'Bank Name'
];

const defaultOption = options[0];

<form className="form-horizontal form-group">
      <Dropdown options={optionsBrstn} onSelect={_onSelect} value={defaultOption} placeholder="Select an option" />
      <div className="text-right mt-2">
            <MDBBtn color="indigo" type="button" onClick={() => {}}>Add</MDBBtn>
            <MDBBtn color="indigo" type="button" onClick={() => {}}>Delete</MDBBtn>
            <MDBBtn color="indigo" type="button" onClick={() => {}}>Save</MDBBtn>
      </div>
</form>

It was originally this._onSelect, however I am not using a class component that's why I cannot use the this keyword.

May I know what approach can I use for this using React hooks.

TIA

Muhammad Haseeb · Accepted Answer · 2020-03-24 08:01:07Z

1

It should be optionsBrstn. I can not see options variable or state.

const defaultOption = optionsBrstn[0]

One more thing, defaultOption is const so if you change the selected option on change, it will not reflect in your select. It should be kept in a state.

edited Mar 24, 2020 at 8:01

answered Mar 24, 2020 at 5:54

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

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

2 Comments

iamjpcbau Over a year ago

I have another question though, what should I put in the onSelect property?

Muhammad Haseeb Over a year ago

Ofcourse, It depends what you want to do in onSelect.

Collectives™ on Stack Overflow

React.js: React dropdown does not hold data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related