React - Count Characters

 index.js (put this in a the new react project)

import React from 'react';

import ReactDOM from 'react-dom';

class CountCharacters extends React.Component { 

    constructor(props)

    {

      super(props);

      this.state = {

        message : ""

      };

    }

    OnMessageChange(text) {

      this.setState({message: "Message has " + text.length + " characters."})

    }

    render() {

      return <div><h2>Char Count</h2>

      

      <p>

        <label>Enter Message: 

<input type="text" onChange={e=> this.OnMessageChange(e.target.value)}>

</input>

        </label>

      </p>

      <p>

        <label>{this.state.message}</label>

      </p>

      

      </div>

    }

}

const elementToRender = <CountCharacters></CountCharacters>

ReactDOM.render(elementToRender , document.getElementById("root"))