# Lesson3-8: State Management: Controlled Components
###### tags: `Recat`
{%youtube d4TOSRgm7GU%}
# React Developer Tools
While building React apps, it may be tricky at times to see exactly is going on in your components. After all, with so many props being passed and accessed, numerous nested components, and all the JSX yet to be rendered as HTML, it can be tough to put things into perspective!

React Developer Tools allows you to inspect your component hierarchy along with their respective props and states. Once you install the [Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US), open the Chrome console and check out the React tab. For a detailed overview, feel free to check out the [official documentation](https://github.com/facebook/react-devtools).

Let's see it in action below!

{%youtube 0MZhfjHAT-U%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/df432ab6b51202e23382487cea26ecf2276dce76)

Note that the `value` attribute is set on the `<input>` element. Since the displayed value will always be the value in the component's state, we can treat state, then, as the "single source of truth" for the form's state.

To recap how user input affects the `ListContacts` component's own state:
1. The user enters text into the input field.
2. The `onChange` event listener invokes the `updateQuery()` function.
3. `updateQuery()` then calls `setState()`, merging in the new state to update the component's internal state.
4. Because its state has changed, the `ListContacts` component re-renders.
Let's see how we can leverage this updated state to filter our contacts. To help us with our filtering we'll need the following packages:
- [escape-string-regexp](https://www.npmjs.com/package/escape-string-regexp)
- [sort-by](https://www.npmjs.com/package/sort-by)

npm install --save escape-string-regexp sort-by


{%youtube -sgnik4W7vY%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/1671c5ca884e7f902ac9069d866079df34e42be1)


# Showing The Displayed Contacts Count
We're almost done working with the controlled component! Our last step is to make our app display the count of how many contacts are being displayed out of the overall total.
{%youtube GbGpEAG-6-w%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/4e1e41b3234ec5297b215b137b7a5dd14ba8e3db)

Do you feel comfortable with Controlled Components? If not, check out the [documentation](https://reactjs.org/docs/forms.html#controlled-components) to see another example. We'll get some practice with Controlled Components shortly.


# Controlled Components Recap
Controlled components refer to components that render a form, but the "source of truth" for that form state lives inside of the component state rather than inside of the DOM. The benefits of Controlled Components are:
- instant input validation
- conditionally disable/enable buttons
- enforce input formats
In our `ListContacts` component, not only does the component render a form, but it also controls what happens in that form based on user input. In this case, event handlers update the component's state with the user's search query. And as we've learned: any changes to React state will cause a re-render on the page, effectively displaying our live search results.