Display text according to the value of react select - reactjs

Question

I would like to display a different text according to the value selected in my react-select. handlechange time is working fine, my problem is when I try to retrieve the value in my p tag to display different text depending on the value
My code:
const timeSlots = [
{
value: 0,
label: 'what is your choice ?'
},
{
value: 1,
label: 'choice 1'
},
{
value: 2,
label: 'choice 2'
},
{
value: 3,
label: 'choice 3'
},
{
value: 4,
label: 'choice 4'
}
]
class WidgetBooking extends Component {
state ={
selectedOption: null,
}
handleChangeTime = (selectedOption) => {
this.setState({ selectedOption });
console.log(selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<>
<div className="time-slots padding-bottom-30px">
<Select
value={selectedOption}
onChange={this.handleChangeTime}
placeholder="what is your choice ?"
options={timeSlots}
/>
</div>
{selectedOption === '1' &&
<p className="d-block widget-title">756, 23 $</p>
}
{selectedOption === '2' &&
<p className="d-block widget-title">865, 23 $</p>
}
{selectedOption === '3' &&
<p className="d-block widget-title">756, 23 $</p>
}
</div>
</>
);
}
}
I would like to display a different price in a p tag, like show above.
Thanks for your help

Answer 1

You've got two issues here:
confusion between an option and the option's value
confusion between string and number
Option vs. Value
What do you see when you call console.log(selectedOption) inside handleChangeTime? I see a complete option object that looks like {value: 2, label: "choice 2"}. That's what you are saving to this.state.selectedOption. But when you compare it in your render, you are expecting this.state.selectedOption to be a numeric string like '1' or '2' -- not an object.
Either one is fine to setState with, but you have to be consistent about what it is or else you will never have a match. If you want to keep handleChangeTime the same, then your render checks need to look like selectedOption?.value === 1. If you want to keep your render() the same, then you need to be setting the state like this.setState({ selectedOption: selectedOption.value.toString() }). That toString() brings us to the next issue.
Number vs. String
When you are comparing values, the number 1 and the string '1' are not the same. If you were dealing with the DOM select element directly, you would likely wind up with string values. But the react-select package calls onChange with the option in the same format that you provided it. In this case, your value property is a number. Again it's consistency that's important. I recommend that you keep it a number everywhere and change your render conditions from selectedOption === '1' to selectedOption === 1.
Corrected Code:
import React, { Component } from "react";
import Select from "react-select";
const timeSlots = [ /* ... */ ];
class WidgetBooking extends Component {
state = {
selectedOption: null // will be a number or null
};
handleChangeTime = ({ value }) => { // destructure to get just the value
this.setState({ selectedOption: value });
};
render() {
const { selectedOption } = this.state;
return (
<>
<div className="time-slots padding-bottom-30px">
<Select
value={selectedOption}
onChange={this.handleChangeTime}
placeholder="what is your choice ?"
options={timeSlots}
/>
</div>
{selectedOption === 1 && (
<p className="d-block widget-title">756, 23 $</p>
)}
{selectedOption === 2 && (
<p className="d-block widget-title">865, 23 $</p>
)}
{selectedOption === 3 && (
<p className="d-block widget-title">756, 23 $</p>
)}
</>
);
}
}