<commit_before>var React = require("react");

class WhatsYourName extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };

    this.onNameChange = this.onNameChange.bind(this);
  }

  onNameChange(event) {
    this.setState({attribute: "Something!"});
  }

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

// Notice some details here:
//   1. `onChange` attribute isn't placed betwen `" "`, but `{ }` - we want to reference function,
//      not string

// ProTip: Always specify input's `name` attribute: React uses it to identify inputs on page.<commit_msg>Description for both tasks on exercise #3<commit_after>var React = require("react");

// Let's see get to the most important feature of React.js - reactive state.
// Each React component has 2 important objects:
//  * Properties - we pass these values when we create component. They don't change over entire 
//                 life of component.
//  * State      - these are the values that we can change over entire time of component's 
//                 existance. When you change some value in `state` object, React will trigger UI
//                 update and modify HTML to look exactly like after the change.
//
//  You can pass properties to components using JSX attributes (you did it on last exercise!). e.g.
//
//  ```
//  <div className="example-class" attr1="ugabuga">[...]</div>
//  ```
//
//  We created `React.DOM.div` component with properties: `{className: "example-class", attr1: "ugabuga"}`
//
// You have two tasks to complete in this exercise:
//
// TASK #1: Someone left non-working code here. Fix the `onNameChange` method. After user type name 
//          into input, the paragraph should automatically update.
// Warning: Do not try to change the `render` structure. But it's good idea to look how it looks like
//
// TASK #2: If there are no name given, we shouldn't display the welcoming message.
//          Use temporary variables to achieve the goal. E.g.
//          ```
//          render() {
//            var numberToDisplay;
//            if (this.state.number > 9000) {
//              numberToDisplay = "IT'S OVER 9000!";
//            } else {
//              numberToDisplay = this.state.number;
//            }
//            return(
//              <span>{numberToDisplay}</span>
//            )
//          ```
// 
// Further reading on task #2: https://facebook.github.io/react/tips/if-else-in-JSX.html

class WhatsYourName extends React.Component {
  // If nobody sets state for component, it will be `null`. In render we are referring to 
  // `state.name`. If we don't set state, we will get error, because we would try to get
  // key from `null`
  constructor(props) {
    super(props);
    this.state = { name: "" };

    // If we don't bind this method - it would have access to wrong `state`.
    this.onNameChange = this.onNameChange.bind(this);
  }

  // We can deined our own methods in React's component class. That's really convenient way to 
  // make our code much clearner.
  onNameChange(event) {
    // Huh... There's something wrong here...
    this.setState({attribute: "Something!"});
  }

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

// Notice some details here:
//   1. `onChange` attribute isn't placed betwen `" "`, but `{ }` - we want to reference function,
//      not string
//   2. You must be very careful on binding methods of components! (see last line of `constructor`)
//   3. `state` object is `null` by default! If you want to display blank value based on attribute
//      from state, you should at least initialize state as an empty object. 

// ProTip: Always specify input's `name` attribute: React uses it to identify inputs on page.
{'fraction_non_alphanumeric': 0.12603773584905661, 'fraction_numerical': 0.004779874213836478, 'mean_word_length': 2.4394463667820068, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 18, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3848764', 'n_tokens_mistral': 1151, 'n_tokens_neox': 1116, 'n_words': 435}