Chapter 7 – Designing the User Interface

1. Props are special objects that you use to pass the values/objects/functions from the parent component to a child component, whereas state belongs to a component – it could be global or local to the component. From a functional component perspective, you use the useState hook for local state and useContext for global state.
2. In general, events are objects generated by the browser on input such as keydown or onclick. React uses SyntheticEvent to ensure that the browser's native events work identically across all browsers. SyntheticEvent wraps on top of the native event. You have used the code onChange={(e) => setUserName(e.target.value)} in the login component. Here, e is SyntheticEvent and target is one of its attributes. The event onChange is binded in JSX that calls setUserName when the input value is changed. You can also use the same JavaScript way to bind events such as window.addEventListener("click...