Answers

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 used the onChange={(e) => setUserName(e.target.value)} code in the login component. Here, e is SyntheticEvent and target is one of its attributes. The onChange event is bound in JSX that calls setUserName when the input value is changed. You can also use the same JavaScript technique to bind events such as window. addEventListener("click", handleClick).

Ideally, you...