React Hooks, events, and state
A great definition of React or its components is that it is, essentially, a function that converts a state to a user interface – a React component is literally a function, as we have seen, and it takes props as arguments. The output of the function (the component, really!) is a JSX element. Essentially, React hooks are functional constructs that enable us to tap into the life cycle of a component and mess with its state.
Creating stateful variables with useState
The first, and probably the most fundamental hook, is the useState
hook, which enables us to maintain a certain state throughout our component. Let’s say that we want to maintain some kind of state in our one-page app – we want to set a budget limit and how much money we are willing to spend, so the website doesn’t try to lure us into even looking at those cars that are just too expensive. We will make a simple textbox, set it to display just numeric values,...