## Callback Handlers in React
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
🔸 *related* [[❞ React State|React State]] | [[❞ Lifting State|Lifting State]]
### Overview
In the previous lesson on React State we showed how state could be utilized to re-render information. However, at this point we still haven't learned how to share state between components.
Since props can only be passed down and not up, we need to find a way to pass information back up the component tree. This is done with a *Callback Handler*.
A **Callback Handler** is when a callback function gets introduced (A), is used elsewhere (B), but "calls back" to the place it was introduced (C).
```js
const App = () => {
const stories = [ ... ];
// A
const handleSearch = (event) => {
//C
console.log(event.target.value);
};
return (
<div>
<h1>My Hacker Stories</h1>
{/* // B */}
<Search onSearch={handleSearch} />
<hr />
<List list={stories} />
</div>
);
}
```
Note that the Search compontent had been modified to pass props in order to access the event handler (*handleSearch*) from the rendered JSX.
```js
//props passes value of event handler
const Search = (props) => {
const [searchTerm, setSearchTerm] = React.useState('');
const handleChange = (event) => {
setSearchTerm(event.target.value);
// goes here
props.onSearch(event);
};
return ( ... );
};
```
### References