How to get boolean data from API selected in a Dropdown (REACT)? - reactjs

Question

I created a dropdown with "true" and "false" options. I get from my API all of my data in a table.
On update, I've got a form that gets the row data. With boolean values, it gets true/false just if I let the html type on "text".
I want to use the dropdown but at the moment it's static so it's always on "true".
How can I select the right value and update the change?
toSelectOption.js
export const trueFalse = [
{ label: "true", value: "Y" },
{ label: "false", value: "F" }
];
Update.jsx
renderTrueFalse() {
return trueFalse.map((item) => {
if (this.state.showKey === true) {
return (
<option value={item.value}>{item.label}</option>
);
}
});
}
//...
<Formik
initialValues={{
//...
showKey,
//...
}}
onSubmit={this.onSubmit}
//...
{
(props) => (
<Form>
//...
<Col md="3">
<FormGroup>
<label>Show Key</label>
<Field className="form-control" component="select"
name="showKey">
{this.renderTrueFalse()}
</Field>
</FormGroup>
</Col>
//...
<div className="d-flex justify-content-center">
<MDBBtn type="submit"
className="btn btn-outline-success waves-effect">Salva</MDBBtn>
</div>
</Form>
)
}
</Formik>
//...

Answer 1

I think that you are missing an onChange event handler on your <Field> component.
Try to add this:
Update.jsx
<Field className="form-control"
component="select"
name="showKey"
onChange={e => this.handleOnChange(e)}
>
and then below your function renderTrueFalse(), add this one:
handleOnChange = e => {
console.log('value->', e.target.value) // e.target.value is your output (Y or F) from the select option
// do whatever you wanna do here with the value from the option in this case ('Y' OR 'F')
}
Open your develop Tools (F12) and see that you are indeed receiving the updated value when you choose the right option.
Check this working on a sample with only React, here