React uses synthetic events to handle events from button, input and form elements. A synthetic event is a shell around the native DOM event with additional information for React. Sometimes you have to use event.preventDefault(); in your application. The list component example is taken from this tutorial about state management in React which…
Basically a React application is just a bunch of components in a component tree. There is one root component which kicks of the rendering for all the other components below. Commonly these components are function components in modern React applications. But they can be class components as well. However, not all of these components are only used…
In a scaling application, you will notice that you pass a lot of state down to child components as props . These props are often passed down multiple component levels. That's how state is shared vertically in your application. Yet, the other way around, you will notice that more components need to use and thus share the same state. That's how…
There are several React Hooks that make state management in React Components possible. Whereas the last tutorial has shown you how to use these hooks -- useState, useReducer, and useContext -- for modern state management in React, this tutorial pushes it to the next level by implementing one global state container with useReducer and useContext…
Since React Hooks have been released, function components can use state and side-effects. There are two hooks that are used for modern state management in React (useState and useReducer) and one hook called useContext to use React's Context API to pass state or state updater functions down the component tree. Now, many people keep…
A brief tutorial which shows you two use cases on how to scroll to an item within a list of items in a React List Component . We will use the native browser API to scroll to our React element with a button click. It's up to you how to trigger the event in the end. For both use cases, we will start with the same React list component that renders…
Since React Hooks have been released, function components can use state and side-effects. There are two hooks that are used for modern state management in React: useState and useReducer. This tutorial goes step-by-step through a useReducer example in React for getting you started with this React Hook for state management. Reducer in React If…
Since React Hooks have been released, function components in React can use state and side-effects. There are two main hooks that are used for modern state management in React : useState and useReducer. This tutorial doesn't explain both React hooks in detail, but explains their different use case scenarios. There are many people who ask me…
If you are new to React, most likely you want to know how to display a list of items in React's JSX syntax. This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React. How to display a list of…
There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple…
