CODEWITHSUNDEEP
reactjs
user8620575
user8620575

Reputation: 165

Handling event method with parameter without inserting parameter

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;

Upvotes: 1

Views: 146

Answers (1)

Felix Kling
Felix Kling

Reputation: 816282

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:

Upvotes: 1

Related Questions