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

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>
    //...

@S.A.R.A. you are probably missing onChange handler for your select and possibly because of that it remains static which probably is the first render case (default) — Rikin
After choosing the option true or false, what do you want to update? — mindmaster
@mindmaster I want to show on Update the right value between True and False. At the moment I've got true by default. — S.A.R.A.

mindmaster mindmaster · Accepted Answer · 2019-09-13T11:02:06

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

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

1 Answers