Press ESC to close

Irakli Tchigladze
1 Min Read

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…

Irakli Tchigladze
2 Min Read

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…

Irakli Tchigladze
1 Min Read

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…

Irakli Tchigladze
2 Min Read

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…

UX
Irakli Tchigladze
2 Min Read

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…

Irakli Tchigladze
1 Min Read

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…

Irakli Tchigladze
2 Min Read

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…

UX
Irakli Tchigladze
2 Min Read

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…

UX
Irakli Tchigladze
1 Min Read

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…