In the past, React components were more class based and had a built in state that could be set.  Now components are functions in React so there needs to be a way to save the state of the component.  Introducing useState!  It allows you to save a particular state of the component  and when the state is set, it triggers a rerender of the component. Here is an example of useState in action to take the users input and display it.

import React, { useState } from 'react';

const TextBoxDisplay = () => {
const [text, setText] = useState('');
const [displayText, setDisplayText] = useState('');

const handleInputChange = (e) => {
setText(e.target.value);
};


const handleButtonClick = () => {
setDisplayText(text);
};

return (
<div>
<input
type="text"
value={text}
onChange={handleInputChange}
placeholder="Enter some text"
/>
<button onClick={handleButtonClick}>Display Text</button>;
<p>{displayText}</p>
</div>
);
}

export default TextBoxDisplay;

In this example, we use two pieces of state: text to store the current value of the input textbox and displayText to store the text that should be displayed below the button. The handleInputChange function updates the text state whenever the input value changes, and the handleButtonClick function updates the displayText state when the button is clicked, effectively displaying the contents of the textbox.

displayText and setDisplayText are related to the state management in a functional React component using the useState hook.

useState is a hook provided by React that allows you to add state to functional components. When you call useState, you pass the initial state value as an argument, and it returns an array containing two elements:

1. The current state value (in this case, displayText)
2. A function to update the state value (in this case, setDisplayText)

In our example, displayText is a state variable that holds the text to be displayed below the button. Initially, the value of displayText is an empty string (”) because we pass an empty string to useState:

const [displayText, setDisplayText] = useState('');

setDisplayText is a function that updates the value of the displayText state variable. When you call setDisplayText with a new value, it triggers a re-render of the component with the updated state value.

In the handleButtonClick function, we call setDisplayText with the value of text

const handleButtonClick = () => {
  setDisplayText(text);
};

When the button is clicked, this function is executed, and the value of text is passed to setDisplayText. This updates the value of displayText to the current input value and triggers a re-render of the component, effectively displaying the contents of the textbox in the <p> element:

<p>{displayText}</p>