React JS - How does this program work?

Question

I took React.JS course in Codeacademy. This problem from React.JS part II. I'm learning patterns of programming but I can't understand how this pattern works

Code:

Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');

var Parent = React.createClass({
  getInitialState: function () {
    return { name: 'Frarthur' };
  },

  changeName: function (newName) {
    this.setState({
      name: newName
    });
  },

  render: function () {
    return (
        <Child 
            name={this.state.name} 
        onChange={this.changeName}
        />
    );
  }
});

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

And the second part:

Child.js
var React = require('react');

var Child = React.createClass({
  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);
},
  render: function () {
    return (
      <div>
        <h1>
          Hey my name is {this.props.name}!
        </h1>
        <select id="great-names" onChange={this.handleChange}>
          <option value="Frarthur">
            Frarthur
          </option>

          <option value="Gromulus">
            Gromulus
          </option>

          <option value="Thinkpiece">
            Thinkpiece
          </option>
        </select>
      </div>
    );
  }
});

module.exports = Child;

When I change the name in the <option>, the program automatically changes value and prints the new description. But I cannot understand how this function works:

handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);

Could someone please explain step by step?

*"I can't understand how this function works"* What in particular don't you understand? There is nothing special about this function... — Felix Kling, Jun 14 '17 at 04:58
That doesn't answer my question. What kind of explanation are you looking for? All functions work the same: When a function is called, each statement inside the body is executed. — Felix Kling, Jun 14 '17 at 05:01
`I took React.JS course in Codeacademy` - can you take the course again? — Jaromanda X, Jun 14 '17 at 05:02
`onChange` is an event listener that listens for the ['change'](https://developer.mozilla.org/en-US/docs/Web/Events/change) event. `handleChange` is an event handler which is fired when the 'change' event is triggered for that element. — John, Jun 14 '17 at 05:48

score 1 · Answer 1 · answered Jun 14 '17 at 05:06

parent component pass on name and onChange handler to its child , which child can access through its props
In child select field contains an handler , as you select different name, this.handlechange is called, which call the changeName function of parent by calling this.props.onChange.
changeName method in parent set the state to different name which was selected in child select field .
then change state is again passed to child automatically ,as prop to child

score 0 · Answer 2 · answered Jun 14 '17 at 05:12

  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);

In child.js, handleChange function bind with select option. We got e(event) in handleChange.
By e.target we got the targeted element, i.e. select dropdown
e.target.value retrieve the selected value from select dropdown
this.props.onChange(name) : pass the value to the parent component and changeName change the value of the name with the help of setState method.

React JS - How does this program work?

2 Answers2