Clicking on radiobutton returns undefined values - reactjs

Question

I want to create an app where you can choose quantity fo water that you have drinked. I want to use radiobuttons in form for 3 default values -250ml, 500ml and 1000ml.
I created radiobuttons, but when I click on them, I get undefined value after e.target method.
I tried to bind my functions on checked and onChange but it didn't help.
Main component WaterApp.js:
import WaterButtons from './WaterButtons';
const quantitiesData = [
{
id: 'water_250_ml',
value: 250,
name: 'water_250_ml'
},
{
id: 'water_500_ml',
value: 500,
name: 'water_500_ml'
},
{
id: 'water_1000_ml',
value: 1000,
name: 'water_1000_ml'
}
];
export default class WaterApp extends React.Component {
state = {
waterQuantity: 'water_250_ml'
};
handleCheckedWaterQuantity = (e) => {
this.state.checkedQuantity === e.target.value;
}
handleWaterQuantityChange = (e) => {
const waterQuantity = e.target.value;
this.setState({ waterQuantity });
console.log(waterQuantity);
}
render() {
return (
<div>
<form>
<WaterButtons
quantities={quantitiesData}
handleCheckedWaterQuantity={(e) => this.handleCheckedWaterQuantity(e)}
handleWaterQuantityChange={(e) => this.handleWaterQuantityChange(e)}
/>
</form>
</div>
)
}
}
WaterButtons.js
import WaterButton from './WaterButton';
const WaterButtons = (props) => (
<div>
{
props.quantities.map((quantity) => (
<WaterButton
key={quantity.id}
id={quantity.id}
value={quantity.value}
label={quantity.name}
checked={props.handleCheckedWaterQuantity}
handleWaterQuantityChange={props.handleWaterQuantityChange}
/>
))
}
</div>
);
export default WaterButtons;
WaterButton.js
const WaterButton = (props) => (
<div>
<input
type="radio"
id={props.id}
value={props.value}
name="waterQuantity"
checked={props.checked}
onChange={(e) => {props.handleWaterQuantityChange(props.value)}}
/>
<label htmlFor={props.id}>
{props.label}
</label>
</div>
);
export default WaterButton;
I want to get the value for clicked radiobutton.
[EDIT] Also, I have a problem with checked value for every radiobutton. Function that is now is not working. I thought maybe I should change my code so that in WaterButton.js i define state for buttons. Then it would have to be class not stateless component.

Answer 1

You are calling handleWaterQuantityChange with incorrect argument please see the below code
Your onChange should be onChange={(e) => {props.handleWaterQuantityChange(e)}}
const WaterButton = (props) => (
<div>
<input
type="radio"
id={props.id}
value={props.value}
name="waterQuantity"
checked={props.checked}
onChange={(e) => {props.handleWaterQuantityChange(e)}}
/>
<label htmlFor={props.id}>
{props.label}
</label>
</div>
);

Answer 2

In props.handleWaterQuantityChange you are passing props.value instead of event
<input
type="radio"
id={props.id}
value={props.value}
name="waterQuantity"
checked={props.checked}
onChange={(e) => {props.handleWaterQuantityChange(e)}}
or
<input
type="radio"
id={props.id}
value={props.value}
name="waterQuantity"
checked={props.checked}
onChange={props.handleWaterQuantityChange}