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-07 21:59:39Z

1

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:

edited Nov 7, 2018 at 21:59

answered Nov 7, 2018 at 21:52

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

user8620575 Over a year ago

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?

Felix Kling Over a year ago

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: <MyCheckbox label={label} handleCheckboxChange={this.toggleCheckbox} key={label} />. There isn't anything more to that...

Collectives™ on Stack Overflow

Handling event method with parameter without inserting parameter

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related