0% found this document useful (0 votes)
5 views1 page

Input Box in react

The document provides an example of a React component that creates a form with an input box for user input. It includes state management for the input value and event handlers for input changes and form submission. Upon submission, the input value is logged to the console.

Uploaded by

iversonmejia1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views1 page

Input Box in react

The document provides an example of a React component that creates a form with an input box for user input. It includes state management for the input value and event handlers for input changes and form submission. Upon submission, the input value is logged to the console.

Uploaded by

iversonmejia1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Here is an example of creating an input box in a [[Forms in react]]

import React, { useState } from 'react';

const MyForm = () => {


// State to manage the value of the input box
const [inputValue, setInputValue] = useState('');

// Event handler to update the state when the input value changes
const handleInputChange = (event) => {
setInputValue(event.target.value);
};

// Event handler to handle form submission


const handleSubmit = (event) => {
// Prevent the default form submission behavior
event.preventDefault();

// Do something with the input value, for example, log it


console.log('Input value submitted:', inputValue);
};

return (
<form onSubmit={handleSubmit}>
<label>
Your Name:
{/* Controlled Input component */}
<input
type="text"
value={inputValue}
onChange={handleInputChange}
/>
</label>
<br />
{/* Submit button */}
<button type="submit">Submit</button>
</form>
);
};

export default MyForm;


#Web-Dev #React #Frontend #javascript

You might also like