david-s
6/4/2019 - 9:26 AM

React JS - Input Field Form

On submit, this logs the text field value

import React from 'react';

/**
* Example component
*/
export class SessionTen extends React.Component {
  state = {
    value: ''
  };
  /**
   * Looks for input change
   * @param {event} event - The click event
   */
  handleChange = event => {
    this.setState({value: event.target.value});
  }
  /**
   * Log the value of the input
   * @param {event} event - The click event
   */
  logValue = event => {
    console.log('Value: ', this.state.value);
  }
  /**
   * Render.
   * @return {JSX} - header.
   */
  render() {
    return (
      <div>
        <h1>Session Ten Title</h1>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button onClick={this.logValue}>Click Here</button>
      </div>
    );
  }
}