Why is my code returning NaN

JavaScript
1

Hi! everyone I trying to build a project which find the power of the number and when I am testing I encountered this issue it’s saying NaN as result. I entered 4 in the first box and 3 in the second box the answer is supposed to be 64 but is NaN

Here is my code: pow-find - StackBlitz
Here is my Project live: https://pow-find.stackblitz.io

2

I entered like this:

Screenshot (89)
Screenshot (89)1268×273 3 KB

Result:
Screenshot (90)

3 
handleChange(event) {
    this.setState({value: event.target.value});
  }

  handlePow(event) {
    this.setState({pow: event.target.pow});
  }
//handlePow is not quite right
4

I didn’t understand still?

6

handleChange works so what is it doing that handlePow is not?

7

I’m getting this error in the console @caryaharper

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at label
at form
at div
at App (https://pow-find.stackblitz.io/~/src/App.js:11:9)
8

can you show me what you’ve changed so far?

9

Nothing just trying to find the error using react dev tools

10

If all your trying to do is get let say this output Result is : 81 when the input is 3 and 4 all you need to change is this handler
handlePow(event) { this.setState({pow: event.target.pow}); }
Currently you are saying the prop pow should have a value of event.target.pow, so I want you to console.log that value and tell me what it is

11

In your handleSubmit function add this line console.log(this.state.value ,this.state.pow);

12

I get this error

Error: Cannot read property 'pow' of undefined
13

That’s good as we can see event.target.pow does not exist so we want to change it to the correct value that does exist

14

You will notice that this.state.value has the accurate value so consider how you set its value

15

I set both of them to an empty string at the declaration

16

It’s when you are grabbing the numbers from the input that is important. The reason this.state.pow is undefined is because when you set it in the handler you are not grabbing an existing value, the property pow does not exist on event.target, but the property of value does exist

17

I used these to set:

handleChange(event) {
    this.setState({value: event.target.value});
  }

  handlePow(event) {
    this.setState({pow: event.target.pow});
  }

and

handleSubmit(event) {
    alert(' Result is : ' + Math.pow(this.state.value ,this.state.pow));
    event.preventDefault();
    console.log(this.state.value ,this.state.pow);
  }
18

the property of value for the state is not inherently the same as the property of value for event.target the original value of value for state is an empty string, but the value for event.target.value is whatever the input is, and this is true for how you should be setting pow as well. event.target refers to the node (the input), and the property of value refers to the written number within the input. You have two different inputs so you have two different event.target.value(s)

19 
handleChange(event) {
    this.setState({value: event.target.value});
  //here you are setting this.state.value to  event.target.value
//event.target.value is whatever number is in the input
  }

  handlePow(event) {
    this.setState({pow: event.target.pow});
//here you are setting this.state.pow to  event.target.pow
//event.target.pow does not exist, but just like the other input event.target.value does exist
  }
20

It means that I should change the target word to something else? @caryaharper

21

run this console.log(event.target.value) inside of handleSubmit and see what it says

1 Like