React useState Sample

//React useState Sample

//Below there are two components, one is a class component 

//and another is a function component

//class component uses state to manage state

//while function component uses "useState" hook to manage state

import React from 'react';

import ReactDOM from 'react-dom';

import {useState} from "react";

////Class Component///////////////////////////////////////////////

class Employee extends React.Component { 

  constructor(props)

  {

    super(props);

    this.state = { 

      Name : "DefalutValue" 

    }

  }

  changeName = (e) => {

    this.setState({Name:e.target.value});

  }

  render() {

    return <div>

      <h1>Class Component</h1>

      <p>

        <label> Employee Name : 

          <input type="text" value={this.state.Name} onChange={this.changeName}>

          </input>

        </label>

      </p>

      <p>

        Entered name is : <b>{this.state.Name}</b>

      </p>

    </div>

  }

} //Employee

////Class Component///////////////////////////////////////////////

////Function Component////////////////////////////////////////////

function NewEmployee() {

  const [name , setName] = useState("DefaultValue");

  function changeName(e) {

    setName(e.target.value);

  }

  return <div>

    <h1>Func Component</h1>

    <p>

      <label> Employee Name : 

        <input type="text" value={name} onChange={changeName}>

        </input>

      </label>

    </p>

    <p>

      Entered name is : <b>{name}</b>

    </p>

  </div>

}

////Function Component////////////////////////////////////////////

const element = <div> 

  <p>

    <Employee></Employee>

  </p>

  <p>

  <NewEmployee></NewEmployee>

  </p>

  </div>

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