React calculator: problem with binding methods

React calculator: problem with binding methods
0

#1

I´m trying to make a click handler event that will handle all the calculation operations. I keep getting a error when compiling. I´ve tried everything, but I can´t seem to solve it. I think I´m binding the method wrong inside the class, but I am not sure (the “Button” is a different functional component).


#2

What does the console show for the specific error?


#3

Tried that, sitll doesn´t work


#4

Try moving handleClick() OUTSIDE of the constructor function, but still inside your component.


#5

I moved it, I think, but still getting the same error (but on a different line!):


#6

Something I might suggest (don’t know if it’ll help, but it’s good practice while I’m looking at other things – don’t use event as a parameter. It’s a part of the javascript language itself, should be a reserved keyword. Rather, do sommething like:

handleClick(evt){
  const answer = evt.target.id;
  // the rest of your code...
}

#7

Thank you. I changed it, but still doesn´t solve the problem.


#8

According to what I’m seeing, the error is in the handleClick function, and may have nothing to do with a semicolon. When you setState() in the handleClick(), what state property is that array being assigned to?


#9

I solved it, I was setting value wrong. Stupid mistake!
But I can´t seem to get the function to push the button´s values into the value array:


#10

So you want to concatenate the current result onto this.state.value – how about this.setState({value : this.state.value.concat(result) })

That preserves the original value array, and adds that one value on. This wasn’t my idea, took it from stackOverflow.


#11

Nope, not working. Don´t know what I´m doing wrong.


#12

Have you read https://www.robinwieruch.de/react-state-array-add-update-remove/


#13

Yeah, but even changing the array into a string doesn´t solve it:


#14

Well, it wouldn’t. I assume that last one simply replaces the current value with result, rather than pushing it onto a stack. Try

handleClick(evt){
  const result= evt.target.value;
  this.setState({ value : [...this.state.value, result] } )
 }

Basically does the same thing as concat(), using the spread operator. Do you have this running somewhere that we can hammer on it a little?


#15

All these Button components in the return method break the DRY principle. You need to generate them dynamically. UseReact.cloneComponent or a higher-order component to add the onclick for all at once instead of doing it manually for each.


#16

Thank you. I looked it up, but don´t know how to pass props to the CloneComponent.


#17

I´ll throw it on a Codepen!


#18

If you want to pass a prop called ‘newProp’ with the value ‘valueProp’, then your new element will be React.cloneElement(element, {newProp: 'valueProp}), where element = <Button onClick={handler}/>.
I stand corrected, you cannot pass onClick with cloneComponent, but you don’t have to, as I did it by adding to the JSX element directly. Then you can pass an array with the values and id (why not just name them all from 1 to 16 to make it easier, and then in the handler use a switch to interpret). So you get something like this:

let i = 0;
let arr = []
while (i<16){
  arr.push(i++);
}

Then, in the return method in render:

return (
  <div>
    <Display id="display" value={this.state.value} />
   {arr.map(el => <Button onClick={this.handleClick} key={el} id={el} value={el} />)}
  </div>
);

Then in the hadler add a switch in which you interpret what is happening if value is a certain number and so on. I think the code looks much better and it does not even use use React.cloneComponent.


#19

I believe you want to pass your value to the function as an argument instead of assigning it as a value to the button.

So in your code you can have handleClick:

handleClick(val) {
this.setState({value: this.state.concat(val)});
}

then on the button:

<Button onClick={() => this.handleClick("/")} id="divide"  />

#20

I can´t do that because the challenge has strict rules about the ID names.