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.
NOTE - Here we will Tailwind CSS for designing.
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.
.png)
.png)
