Handling event method with parameter without inserting parameter

2998 views reactjs
5

I attached a picture describing my question. I cannot understand what is a mechanism of sending this parameter. How is it possible, that React knows what value to send when we dont insert any parameter into calling function?

I really beg explanation, i am desperate from it. I need to understand that mechanism in order to do other things.

Here is a photo describing my problem:

enter image description here

Here is the WHOLE code (you can smoothly start it):

App.js:

import React, { Component } from "react";
import MyCheckbox from "./MyCheckbox";

const items = ["One", "Two", "Three"];

class App extends Component {
  componentWillMount = () => {
    this.selectedCheckboxes = new Set();
  };

  toggleCheckbox = label => {
    if (this.selectedCheckboxes.has(label)) {
      this.selectedCheckboxes.delete(label);
    } else {
      this.selectedCheckboxes.add(label);
    }

    for (const checkbox of this.selectedCheckboxes) {
      console.log(checkbox, "is selected.");
    }
  };

  createCheckbox = label => (
    <MyCheckbox
      label={label}
      handleCheckboxChange={this.toggleCheckbox}
      key={label}
    />
  );

  createCheckboxes = () => items.map(this.createCheckbox);

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">{this.createCheckboxes()}</div>
        </div>
      </div>
    );
  }
}

export default App;

MyCheckbox.js:

import React, { Component } from "react";

class MyCheckbox extends Component {
  state = {
    isChecked: false
  };

  toggleCheckboxChange = () => {
    const { handleCheckboxChange, label } = this.props;

    this.setState(({ isChecked }) => ({
      isChecked: !isChecked
    }));

    handleCheckboxChange(label);
  };

  render() {
    const { label } = this.props;
    const { isChecked } = this.state;

    return (
      <div className="checkbox">
        <label>
          <input
            type="checkbox"
            value={label}
            checked={isChecked}
            onChange={this.toggleCheckboxChange}
          />

          {label}
        </label>
      </div>
    );
  }
}

export default MyCheckbox;

answered question

1 Answer

8

How is it possible, that React knows what value to send when we dont insert any parameter into calling function?

It doesn't.

Array.prototype.map iterates over the array and calls the callback for each element, passing that element to the callback.

Here is a simpler example:

console.log(
  [1,2,3].map(x => x + 1)
)

You can think Array.prototype.map to be implemented approximately like this:

function map(callback) {
  // `this` is the array
  var result = [];
  for (var i = 0; i < this.length; i++) {
    result.push(callback(this[i]));
    //          ^^^^^^^^^^^^^^^^^
  }
  return result;
}

console.log(map.call([1,2,3], x => x + 1));


this.toggleChechkbox on the other hand gets the label as argument because MyCheckbox explicitly passes it in

const { handleCheckboxChange, label } = this.props;
// ...
handleCheckboxChange(label);

So, as you hopefully see, there is no magic going on. Array.prototype.map is implemented in such a way that each element is passed to the callback.

And you created MyCheckbox so that it passes label to the handler.

React is not involved here at all.

posted this

Have an answer?

JD

Please login first before posting an answer.