## React State
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
▫️ *related* [[❞ Callback Handlers in React|Callback Handlers in React]] *next* [[❞ Callback Handlers in React|Callback Handlers]] | [[❞ Lifting State|Lifting State]]
### Overview
React Props and State have clearly defined purpose.
- Props is used to pass information down the component tree
- State is used to alter information over time, in order to make applications interactive
In this example, the input field's change event is captured by the handler. The event value is passed as an argument to `setSearchTerm` to set the updated state. Once updated the component re-renders and becomes the current state.
>When the user types into the input field, the input field's change event is captured by the event handler. The handler's logic uses the event's value and the state updater function to set the updated state. After the updated state is set in a component, the component renders again, meaning the component function runs again. The updated state becomes the current state and is displayed in the component's JSX.
```js
import React from 'react';
const Search = () => {
// both the output searchTerm and event setSearchTerm will set to useState
const [searchTerm, setSearchTerm] = React.useState('');
const handleChange = (event) => {
setSearchTerm(event.target.value);
};
return(
<div>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handleChange} />
<p>
searching for <strong>{searchTerm}</strong>.
</p>
</div>
)
}
```
[[❜ How to useState in React|useState]] function is an example of a *React hook*.
### References