CODEWITHSUNDEEP
javascriptreactjs
Ozturk Can Gokkaya
Ozturk Can Gokkaya

Reputation: 335

Using boolean values for <option> values in React

I store "isAvailable" prop as boolean, but when handleChange function runs it turns my boolean variable into string. Is it possible to keep "isAvailable" boolean without creating another function for handling changes?

Here is my rendered selectbox : 

<select
    type='text'
    name="isAvailable"
    className='itemAvailability form__input'
    value={this.props.details.isAvailable}
    onChange={this.handleChange}
>
    <option>Availability</option>
    <option value={true}>Available</option>
    <option value={false}>Not Available</option>
</select>

And here is handleChange function

handleChange = (e) => {
    const updatedItem = {
        ...this.props.details,
        [e.currentTarget.name]: e.currentTarget.value
    }

    this.props.updateItem(this.props.index, updatedItem);
}

Upvotes: 3

Views: 14601

Answers (4)

Jay Jay
Jay Jay

Reputation: 1

[2023] There is a work around where you can check for the current selected value and return a final value based off that.

Eg: For your code above

<select
    type='text'
    name="isAvailable"
    className='itemAvailability form__input'
    value={this.props.details.isAvailable}
    onChange={this.handleChange}
>
    <option>Availability</option>
    <option value={true}>Available</option>
    <option value={false}>Not Available</option>
</select>

In your data to be submitted, you can have:

const dataToSubmit= {
    isAvailable:
      formdata.isAvailable === "true"
        ? true`enter code here`
        : formdata.isAvailable === "false"
        ? false
        : null,
  };

Upvotes: 0

Rich H
Rich H

Reputation: 1

Late, but I figured I would show how I handle something similar to this. Once my option hits the mongo db the value is set as a boolean, but before the page is refreshed redux stores the option as a string, so added a check for the string to show the change in the meantime.

onChangeHandler = (event) => {
    this.props.userInfoUpdate(
        event.target.name, event.target.value
    )
}



        const display_address = () => {
        if(!this.props.display_address || this.props.display_address === 'true'){
            return (
                <select name='display_address' onChange={this.onChangeHandler} >
                    <option value={true}>Yes</option>
                    <option value={false}>No</option>                    
                </select>
            )
        }else{
            return (
                <select name='display_address' onChange={this.onChangeHandler} >
                    <option value={false}>No</option>
                    <option value={true}>Yes</option>                                            
                </select>
            )
        }
    }

Upvotes: 0

Ozturk Can Gokkaya
Ozturk Can Gokkaya

Reputation: 335

Here is my solution for those having the same problem. I've updated my handleChange function as shown below.

handleChange = (e) => {
    let updatedValue = e.currentTarget.value;

    if (updatedValue === "true" || updatedValue == "false") {
        updatedValue = JSON.parse(updatedValue);
    }

    const updatedItem = {
        ...this.props.details,
        [e.currentTarget.name]: updatedValue
    }

    this.props.updateItem(this.props.index, updatedItem);
}

Upvotes: 3

Dimitri Mockelyn
Dimitri Mockelyn

Reputation: 1545

The value property of an HTML option element can only be a string. If you want to get boolean values, you should probably setup a radio input field

Upvotes: 2

Related Questions