What am I missing here?


#1


https://www.codecademy.com/en/courses/react-102/lessons/react-forms/exercises/input-event-handler


I am not receiving any written error messages but something is clearly failing since I'm getting a red x with a red background on Step 1. That said, I am absolutely certain I'm missing some key bit in my code and it's probably something really silly that I forgot. Any enlightenment is much appreciated!

Specifically, I think what is missing has something to do with this bit:

Inside of this function's body, call this.setState. Set the state's userInput property equal to e.target.value.

e.target.value will equal the text in the <input /> field. You are setting this.state.userInput equal to whatever text is currently in <input />.


var React = require('react');
var ReactDOM = require('react-dom');

var Input = React.createClass({
  handleUserInput: function(e) {
    this.setState({
      userInput: e.target.value;
    });
  },
  render: function () {
    return (
      <div>
        <input 
          type="text" 
          onChange={this.handleUserInput}
          />
        <h1>I am an h1.</h1>
      </div>
    );
  }
});

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


#2

This may have actually been a bug on chrome. I pasted this into an instance of the code academy lesson on Firefox and it worked. o_O


#3

just remove semicolons after userInput: e.target.value;


#4

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