Define an Event Handler (2/5)


#1

Hi Everyone,

It has been a while since I did the React JS part I course and at the moment, I am a bit stuck on part II.

https://www.codecademy.com/courses/react-102/lessons/child-updates-parents-state/exercises/child-parent-define-handler?action=lesson_resume&link_content_target=interstitial_lesson

In the local host, by selecting from the menu, the name displayed should change. Unfortunately, this does not happen with my code. The exercise has accepted my code as correct so I am not sure if it is a bug with the interface or I missed something in my 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} />
    );
  }
});

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

Child.js:

var React = require('react');

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

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

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

module.exports = Child;

Please advise if you spot any mistakes as I am quite rusty.

Thanks!


#2

You are simply defining a new function in this step. Continue onto the next step.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.