useState( )

📝Instructions

Now useState is used to listen the events in the react

Code


// import React from 'react';
import "../../index.css";
import { useState } from "react";


const Form = () => {
    const onclickhandler = () => {
        console.log("onclickhandler is called")
        setText('text is again set')
        
    };
    const onchangehandler = () => {
        console.log("onchangehandler is called");
        setText('text is set')
    };
    
    const [text, setText] = useState("default text");
    return (
        <div>
            <div className="block p-6 rounded-lg shadow-lg bg-white w-[1000px] ">
                <h1 className="text-black text-left font-bold mb-3 text-3xl">Enter the text below</h1>
  {/* <form className="w-full"> */}
    <div className="form-group mb-6 ">
                    <textarea type="email" onChange={onchangehandler} className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail1"
                        aria-describedby="emailHelp" placeholder="Enter email" rows={8} value={text}   />
      
    </div>
    
    
    <button  className=" px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" onClick={onclickhandler}>Convert to Uppercase</button>
  {/* </form> */}
</div>
        </div>
    );
}

export default Form;

💡

In the syntax of the useState there are two props called text and setText where the text is the variable name and setText is the function to change the variable value : just we need to provide that as a setText(’new text’); // it will be changed

In the image we can see how to import the useState from react

In this we have a problem that if we can just tap in the text area and want to start typing then it will show the text is set as defined in the onchange handler

but this will not allow us to write in the field

we have to use the setText(event.target.value) inside the function then it will change the value of the textarea as we start to type

💡

Most important that we have to pass a parameter in the onchangehandler called event : onchangehandler(event) ☺️

Code


// import React from 'react';
import "../../index.css";
import { useState } from "react";


const Form = () => {
    const onclickhandler = () => {
        console.log("onclickhandler is called")
        const newText = text.toUpperCase();
        setText(newText)
        
    };
    const onchangehandler = (event) => {
        console.log("onchangehandler is called");
        setText(event.target.value)
    };
    
    const [text, setText] = useState("default text");
    return (
        <div>
            <div className="block p-6 rounded-lg shadow-lg bg-white w-[1000px] ">
                <h1 className="text-black text-left font-bold mb-3 text-3xl">Enter the text below</h1>
  {/* <form className="w-full"> */}
    <div className="form-group mb-6 ">
                    <textarea type="email" onChange={onchangehandler} className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail1"
                        aria-describedby="emailHelp" placeholder="Enter email" rows={8} value={text}   />
      
    </div>
    
    
    <button  className=" px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" onClick={onclickhandler}>Convert to Uppercase</button>
  {/* </form> */}
</div>
        </div>
    );
}

export default Form;