How to get users input value by users automatically and manually

Today in this blog, we will aware about get input box value means how to get input user value by automatically or when use click on submit button by using reactjs. So, without wasting any time lets do it but lets recap what is exactly React js. 

React

Certainly! ReactJS is a JavaScript library developed by Facebook for building user interfaces. It allows developers to create reusable UI components and efficiently manage the state of their applications. Here are some key aspects of ReactJS:

Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.

Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.

JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.

Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.

React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.

State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.

ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community. 

Get user Input Value by automatically

import React, { useState } from 'react'

function Getvalue() {

    const [data, setData] = useState(null);
    const [print, setPrint] = useState(false);

    function getdata(val) {
        console.log(val.target.value);
        setData(val.target.value)
    }
  return (
    <div>
    
    
    <div className=" grid  grid-cols-1 lg:grid-cols-1  md:grid-cols-1 sm:grid-cols-1  ">     
 <div className="h-auto md:grid-cols-6 ml-36   text-center md:grid-rows-6">
 
 
  <div className="mx-auto mt-36   w-80">
  <form   className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      
    <div className="mb-1">
      <input type="text" className="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" onChange={getdata}  />
     </div>
     
      <div>{data}     </div> 
 
 
    
  </form>
  </div>
  </div> 
   
   
</div>
</div>
  
  )
}

export default Getvalue

1) The import React, { useState } from 'react' line imports the React library and the useState hook, which allows functional components to have state.

2) The Getvalue function is the React component that will be rendered.

3) Inside the component, there is a state variable data defined using the useState hook. data is initially set to an empty string.

4) The getdata function is defined to update the data state variable with the value entered in the input field. It logs the entered value to the console and updates the state using the setData function.

5) The return statement contains the JSX code that defines the component's UI.

6) The JSX code renders a <div> element that wraps the form.

7) Inside the <form> element, there is an <input> element of type "text" that binds the getdata function to the onChange event. This means that whenever the input value changes, the getdata function will be called.

8) There is a <div> element that displays the data value, which is the value entered in the input field. This element is updated automatically as the state changes.

9) The component ends with closing tags to close the JSX elements and functions.

10) Finally, the component is exported using export default Getvalue to make it available for use in other parts of the application.

In summary, this simplified code creates a form with an input field. When the user enters a value, it is stored in the data state variable. The entered value is displayed below the input field in real-time as the state updates.

output

Get user Input Value by manually

Here we can add another state so  and print is initially set to false and updates the state using the setPrint function.

const [print, setPrint] = useState(false);

and Add a button when user click on it then value get it and page refreshing...so  this updates the print state variable to true.

<button onClick={() => setPrint(true)} className='' >Get Value</button>

Following the button, there is a conditional rendering logic using a ternary operator. If print is true, it renders a <h1> element with the data value inside. Otherwise, it renders null.

{
  print ?
  <div><h1> {data}</h1> </div>: null
}

Whole Code 

import React, { useState } from 'react'

function Getvalue() {

    const [data, setData] = useState(null);
    const [print, setPrint] = useState(false);

    function getdata(val) {
        console.log(val.target.value);
        setData(val.target.value)
    }
  return (
    <div>
    
    
    <div className=" grid  grid-cols-1 lg:grid-cols-1  md:grid-cols-1 sm:grid-cols-1  ">     
 <div className="h-auto md:grid-cols-6 ml-36   text-center md:grid-rows-6">
 
 
  <div className="mx-auto mt-36   w-80">
  <form   className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      
    <div className="mb-1">
      <input type="text" className="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" onChange={getdata}  />
     </div>
     
     {/* <div>{data}     </div> */}
 
     <div className="mb-1">
     <button onClick={() => setPrint(true)} className='bg-green-600 text-white pt-1 pb-1 pr-3 pl-3 rounded-full'>Get Value</button>
      </div>
      
      {
        print ?
        <div><h1> {data}</h1> </div>: null
      }

  </form>
  </div>
  </div> 
   
   
</div>
</div>
  
  )
}

export default Getvalue

Output

Disclaimer

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.