I’m using React with multiple components on my local environment. I have a problem with my event handler. When I pass in an event.target, one of the element is receiving “Nan”. When it is passed from the component however, that element IS a Number.
For example:
number: 25 in session interval component (confirmed in console)
However in the event handler (onIncrement), this is what I receive from the console:
event.target= {currentInt: 26, minute: NaN, increment: ƒ, decrement: ƒ}
event.target.number=NaN
Please note that name and value are working fine. Notice I convert value to a Number because it is passed into the event.target as an integer.
My question is, how do I get event.target.number to pass 25 to the event handler?
My Session Interval Component that prompts my event handler:
const SessionInterval=(props)=>{
console.log(props) //receiving props with all the correct values
return (
<div>
<button
name="sessionLength"
value={props.currentInt}
minute={props.minute} //at this point, minute has a value
onClick={props.decrement}>down
</button>
<p>{props.currentInt}</p>
<button
name="sessionLength"
value={props.currentInt}
minute={props.minute}
onClick={props.increment}>up
</button>
</div>
)
}
My Event Handler:
onIncrement =(event)=>{
console.log(event.target) //showing all elements in target but number: "NaN"
console.log(event.target.number) //undefined - see previous comment
let {name,value, minute} =event.target;
value=Number(value); //event.target.value changes type to "string", need to convert it back to number
if (value<60){
this.setState(prevState=>{
return ({
...prevState, [name]:value+1, timerMinute: minute+1
});
})
}
}