exercise 3 solution

gistfile1.js

var React = require("react");

class WhatsYourName extends React.Component {
  // By default `this.state` is `null`. In `render` we are referring to
  // a specific element from the `state` object - `this.state.name`.
  // If we don't set an initial state, we will get an error. It's impossible to fetch
  // an object key from `null`.
  //
  // Think about it: you can set name from a cookie on component initialization!
  //                 What else could you do here?

  constructor(props) {
    // Properties object is called `props`. You can access it with `this.props`.
    // We won't use it in this exercise.
    super(props);
    this.state = { name: "" };

    // Warning! If we don't bind this method - we would not be able to update state.
    this.onNameChange = this.onNameChange.bind(this);
  }

  // `event` is the only argument passed to that method. It will be an event
  // object thrown by React on actions like `click`, `change` etc.
  //
  // You need to correct the call of `setState` method. Just try to set
  // the `name` field to the value passed in event.
  //
  // Hint: use `console.log` to check `event.target`. You will find text
  //       entered to the input there.
  onNameChange(event) {
    // Huh... There's something wrong here...
    this.setState({name: event.target.value });
  }
  
   render() {
    var helpText;
    if(this.state.name.length == 0) {
      helpText = "Hey there. Enter your name.";
    } else {
      helpText = `Hello ${this.state.name}`
    }

    return (
      <div>
        <p>{helpText} </p>
        <input type="text" name="name" onChange={this.onNameChange} />
      </div>
    );
  }
}

// Notice some details here:
//   1. `onChange` attribute isn't placed between `" "`, but `{ }` - we want to
//      reference function, not string.
//   2. You must be very careful on methods binding. You can do it in the constructor.
//   3. `state` object is `null` by default! If you want to display initial
//       value from state object, you should initialize state object.

// ProTip: Always specify input's `name` attribute: React uses it to identify
//         inputs on page. Not doing so may cause you to waste a long time
//         debugging your program.

export default WhatsYourName;

@timtyrrell Gotcha, thanks for setting me straight. So to interpolate outside of the return means you need `, instead of "?

To string interpolate in ES6 is ${} syntax. To insert javascript in JSX is the {} syntax. So in theory, you could interpolate in JSX inside the {} but that probably makes no sense. It is not the return that is importand, it is the JSX. You could have JSX outside the return and then you can use {}.

example: http://codepen.io/timtyrrell/pen/NqBzyY?editors=101

This is one of the badass things about components and JSX. You can just use javascript and extract methods to build helpers, etc.