React: onClick method not working with parameters

Question

I have a 2d array of integers, each of which are being mapped to a render method that displays each value as a button. What I am trying to do is when the user clicks on the button, it updates the index of the elements, so it will show the updated value when the button is being rendered. However, the onClick method is never being called.

class Matrix extends Component {
  state = {
    rows: 0,
    cols: 0,
    elements: null
  };

  constructor() {
    super();
    this.state.elements = this.createMatrix();
  }

  updateElements = (i, j) => {
    console.log("CLICK");
    const newElements = this.state.elements.slice();
    newElements[i][j]++;
    this.setState({ elements: newElements });
    console.log(this.state.elements[i][j]);
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            {Object(
              this.state.elements.map((e, i) => {
                return (
                  <tr>
                    {Object(
                      e.map((f, j) => {
                        return (
                          <td>
                            <MatrixElement
                              onClick={() => this.updateElements(i, j)}
                              value={f}
                            />
                          </td>
                        );
                      })
                    )}
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    );
  }
  createMatrix = () => {
    var matrix = [];
    var i, j;
    var sub;
    for (i = 0; i < this.state.rows; i++) {
      sub = [];
      for (j = 0; j < this.state.cols; j++) {
        sub[j] = 0;
      }
      matrix[i] = sub;
    }
    return matrix;
  };
}



class MatrixElement extends Component {
  render() {
    return <button>{this.props.value}</button>;
  }
}

If I change the onClick method to this:

onClick={this.updateElements(i, j)}

I get overflow errors. I imagine there is a much simpler way to implement what it is I'm trying to do, but I don't understand why this doesn't work.

Can you provide more code? A runnable/reproducible CodeSandbox would get you an answer very quickly. — Rico Kahler
– Rico Kahler, Commented Nov 17, 2019 at 3:19
onClick doesn’t receive I, j; it receives the synthetic event. You can’t make up parameters. — Dave Newton
– Dave Newton, Commented Nov 17, 2019 at 3:19

Nick · Accepted Answer · 2019-11-17 03:37:14Z

3

You likely mean to not pass any parameters to the onClick handler:

onClick={() => this.updateElements(i, j)}

As you're relying on i and j from your iterators outside of that function.

Edit: You also need to handle the onClick in your Matrix element!

class MatrixElement extends Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.value}</button>;
  }
}

edited Nov 17, 2019 at 3:37

answered Nov 17, 2019 at 3:20

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Perplexityy Over a year ago

changed it to this but it still doesn't fire

Nick Over a year ago

Ah-ha, updated to make sure you're actually firing the click event!

Nick Over a year ago

Glad to hear it, happy coding!

Elan Hamburger · Accepted Answer · 2019-11-17 03:23:02Z

0

You've declared your onClick to accept two parameters, i and j, but React doesn't pass your variables to the function, it passes the synthetic event. i and j are already in scope at that point of the code, so there's no reason to add extra parameters to your function.

Try changing your onClick to

() => this.updateElements(i, j)

answered Nov 17, 2019 at 3:23

Elan Hamburger

2,18713 silver badges15 bronze badges

Collectives™ on Stack Overflow

React: onClick method not working with parameters

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related