Handling event method with parameter without inserting parameter

Question

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:

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;

Felix Kling · Accepted Answer · 2018-11-07T21:59:39.333

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.

Related:

Hi, thanks, i understand the orange arrow explanation, but i still dont understand the red arrow on the picture. How come that label appears there, i dont realize that some callback would return label value. Where program sends that label value? — user8620575, Nov 08 '18 at 08:18
The orange one is the simpler one. *You* are calling `toggleCheckbox` here: `handleCheckboxChange(label);` Where does `handleCheckboxChange` and `label` come from? You're passing it as props to `MyCheckbox` here: ``. There isn't anything more to that... — Felix Kling, Nov 08 '18 at 08:27

Handling event method with parameter without inserting parameter

1 Answers1