Javascript Calculator, before each hook error

1

Hello!

So I’m redoing the javascript calculator (the one I did previously was before all the topics were rearranged and they didn’t have that little project tester or any courses for React, so I wanted to rework it in React).

The tester is erroring out on the errors, but also erroring out on the #technology stack giving a “before each hook” error without really much info.

I’ve narrowed down the issue to the lines declaring the IDs for my button elements. Here’s the relevant code:

class Button extends React.Component{
    constructor(props){
      super(props);
      this.handler = this.handler.bind(this);
    }
    handler(){
      this.props.elements.forEach(e=>this.props.addElement(e))
    }
    render(){
      return(
        <button
          className={`btn${this.props.class}`}
          id={this.props.idValue}
          onClick={this.handler}
          dangerouslySetInnerHTML=
          {{__html: this.props.class == '' ? this.props.html 
          : `<div>${this.props.html}</div>`}}
          style={this.props.class ? {} : {border: '1px solid lightgrey'}}/>
      );
    }
  }

/*...*/

class Left extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      const buttons = [
        {id: 'zero', element: 0},
        {id: 'one', element: 1},
        {id: 'two', element: 2},
        {id: 'three', element: 3},
        {id: 'four', element: 4},
        {id: 'five', element: 5},
        {id: 'six', element: 6},
        {id: 'seven', element: 7},
        {id: 'eight', element: 8},
        {id: 'nine', element: 9},
        {id: 'clear', element: 'AC', class: 'btn-danger'},
        {id: 'ce', element: 'CE', class: 'btn-danger'},
        {id: 'open_paren', element: '('},
        {id: 'close_paren', element: ')'},
        {id: 'add', element: '+'},
        {id: 'subtract', element: '-'},
        {id: 'multiply', element: '*'},
        {id: 'divide', element: '/'},
        {id: 'decimal', element: '.'}
      ];
      return (
        <div id = 'left'>
          {buttons.map(e=>{
            return <ButtonConnection
              idValue={e.id}
              elements={[e.element]}
              class = {e.class ? ' ' + e.class : ''}
              html = {e.element}/>;
          })}
        </div>
      );
    }
  }

If I comment out the idValue line in either class, the Technology Stack passes (of course none of my button elements then have ids). At first I was using id rather than idValue, and I thought that was maybe creating a conflict, but it didn’t help.

Also to note, if I inspect the button elements as is, they do have the appropriate IDs.

Here is the full project so far

2

Your error message:
ReferenceError: TYPES is not defined
The error message from freeCodeCamp and the dev tools on Firefox point to this line as the error because TYPES is not defined:

function updateState(element){
    var result = {
      type: TYPES.NUMBER,
      element
    };
3

Thank you! I didn’t even think to look in the Chrome console, I was relying on the codepen console >< But you’re right, that pointed to the exact line, and it fixed it. Thanks! ^^