Handling events is the key to building dynamic apps with React. Understanding event.target.value is the key to managing user inputs in React. event.target.value in React Before we get to event.target.value, let’s understand what event is. What is event? When event happens in React, usually we…
Console.log is very useful for debugging in React. console.log in React console.log() has many use cases, one of them is to check the value of a certain variable throughout lifecycle of the app. Let’s look at an example where we console.log() a value at different…
Hiding a component means that the component is rendered, but invisible. Alternatively, you can use conditional rendering to not render an element at all. Hide element in React Let’s see how to hide an element or a component in React. Header element will stay hidden…
Switch statement allows you to define outcomes for multiple scenarios, so it’s invaluable for building dynamic apps in React. How to use switch statement in React There are a number of ways to use Switch in React. Every approach has its advantages and disadvantages. Let’s…
Checkboxes are one of the most common and useful types of inputs in React. React Checkbox onChange When set on a checkbox, onChange event handler runs every time there’s a change – the checkbox is ticked or unticked. Keep in mind that change event will…
Sometimes you need an optional parameter in the URL, so React will render a component even if certain part of the URL is ‘missing’. Add optional parameter in react-router To define any path, you need to import a custom <Route> component from react-router library, and…
Sometimes you need to conditionally change element’s appearance, usually in response to user’s actions. Let’s explore how to do that in React. TL;DR summary 1. Use curly braces to set element’s style to a JavaScript expression. Notice double curly braces. One pair to insert dynamic…
React makes it easy to pass data down from parent to child components. However,what if you need to pass data in the opposite direction? Pass data from child to parent in 3 steps You can pass it down to child components and handle user events,…
Setting a classname attribute is a common way to style elements in React. JSX allows you to embed JavaScript expressions, so you can set className to a dynamic value and style elements conditionally. Include variable in className string className attribute needs to be set to…
useHistory hook needs no introduction. It’s one of the most useful hooks for navigation in React. So let’s see how to (and if we can) use it in React Router 6. useHistory in React Router v6 React developers used useHistory to programmatically navigate from one…