Working with Inputs in React

Working with inputs in React is done using states. Each input is assigned its own state, which contains value of the input.

Let's look at an example. Let's say we have an input:

function App() {
	return <div>
		<input />
	</div>;
}

Let us also have a state:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

Let's bind the state to the value input attribute:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

In this case, it turns out that when the state changes, the input text will also change reactively.

This, however, has an interesting side effect: now when you run the code in the browser, it is impossible to change the text in the input! Why: because when you enter text in the input, the state value does not change, and accordingly, the text in the input should not change.

Try it yourself. Copy my code and run it. Try changing the text in the input - you won't succeed. Open the browser console - you will see a React warning in it. This warning tells us that we have bound the state to the input, but thereby blocked the input.

Let's make it so that we can enter text into our input. To do this, we need to make it so that when entering, our state changes to the current value of the input.

To begin with, you need to attach the onChange event to the input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

This event behaves differently in React than in pure JS. In React, it fires immediately upon input change. That is, when a character is entered or deleted.

Let's now add our event handler:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

In this handler we need to read the current input text and set it to the state using the setValue function.

The problem is that this of this function will not point to our input - this is a feature of React. To get the element where the event happened, we need to use event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // reference to the DOM element of the input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Let's output the current input text using event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // current input text
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Now let's write the input text into our state:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Now we can enter text into the input. The state value will always contain the current input text.

We can easily verify this. Let's output the contents of our text into a paragraph. In this case, when entering text into the input, the entered text will automatically appear in the paragraph:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

We can rewrite it into a more compact version with an anonymous arrow function:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

Thus, for any input to work we need the following: create a state for this input, bind the state to the value attribute of the input, attach the onChange event to the input, and change the state of the input to its text in the event handler.

These operations will need to be performed with each input. That is, if you have two inputs, then you will have two states and two onChange event handler functions.

Make two inputs. Let the text of the first input be output to the first paragraph, and the text of the second input to the second paragraph.