React Component Guides

React Components are the fundamental independent and reusable bits of code in a React program.

This is a collection of top and trending guides written by the community on subjects related to React Component concepts. For all things React, check out the React tag! Please contribute more posts like this to help your fellow developer in need.

How to Pass Data From One Component to Other Component in React?

Props are used for passing data between the components. We usually use it to pass data from the parent component to the child component.

How To Write a Search Component with Suggestions in React

A smart/container component that makes API calls referencing a controlled input.

React: How to create a custom progress bar component in 5 minutes

A couple of days ago, while working on one of React projects with the use of a very popular UI library, I’ve stumbled upon a problem: I needed to make some style changes of the Progress Bar component. But after struggling with it for a few hours and being in a complete desperation (why isn’t it working as it is written in the documentation???), I’ve decided to create a Progress Bar component from scratch. Here how I’ve made it.

How to Create and Publish a React Component Library

This tutorial will take you through the process of creating and publishing your own custom React component library and hosting it on Github.

Layout Component and why we use it in React

In this blog post I will go through Layout Component - an extremely useful component in every application.

Responsive React File Upload Component With Drag And Drop

While working on a React project, I implemented a responsive file upload component that supports drag and drop without using any libraries. Most of the file upload components online used libraries such as react-dropzone to support drag and drop. So, I thought I'd share how I made the component and show a typical use case for it.

Using a Switch Component in React Router

When working with routing in React, I came upon the <Switch /> component and noticed how people were using that in place of <Router />. This made me delve a little further into the differences between the two and why using <Switch /> can be very helpful and the preferred component between the two.

React: Class Component VS Function Component with Hooks

Before React Hooks, when we want to create a dynamic component, we have to create a class component and use lifecycle methods to change states to make it reusable and encapsulate.

Moving Arguments from Child to Parent Component in React

To understand the code easier, React implemented unidirectional data flow, also called 'one-way data-binding' when passing data from parent component to the child.

However, often, we need to pass some data back to the parent from the child, for example, think of forms, when the user's input effects parent component.

For the newcomers to React sometimes, it is hard to grasp the patterns of how to send data back to from child. This article explains how to do it the easy way.

Hot to call this function from another component in react?

Hot to call this function from another component in react?

Creating a Radio Button Component in React

To add to that, using radio buttons in React can be even more tricky. Handling change, tracking which value is selected, having the radio button checked is not so obvious in React. We’ll create our custom RadioButton component in React, in which I’ll try to clarify all aspects of a radio button.

How YOU can use React Testing Library to test component surface

React Testing Library is a different testing library in that it tests the surface of your component rather than the internals. You can change your components as much as you want as long as they render the data the same way or the React in the same way if you after interactions such as filling in data or pressing a button for example.

Creating a React Input component in Typescript

Here is a nice way to create a React Input component using typescript!

Using Next.js Link Component with Material UI Buttons and Menu Items

Link component is a magic component of next.js framework, that does the routing both client-side and server-side (properly rendering links for SEO purposes).

Dependency cycle detected in React component index file

I decided to use an index.js file to handle my component exports. The file structure of my components folder looks ike this:

React Component to Smooth Scroll to the Top

After perusing Stack Overflow and GitHub for solution, I came across an elegant React component that uses Hooks and wanted to share it with this community!

When to use Class Component and Function Component??

In this post let's understand where to use the Class Component and Functional Component in react

React: Create component inside a component (?)

I recently observed one issue in my component rendering. Consider this code

Redux Data Flow and React Component Life Cycle

For item 1, react-redux have a component called Provider that can help us do this.

styled-component + react-transition-group = very simple Transition

If we use styled-componets, <Transition> component may be better than <CSSTransition>

🔧 Build a complete Modal Component with React Hooks 🌈

Last week, we talked about 5 Customs React Hooks ! Many of you have shared this article. So this week, let's continue with React and the implementation of a Modal component without installing any packages!

How to implement a working checkbox component in Formik 1.5.8

I was building a form with Formik and I needed a single checkbox to mark a post as "published". In Formik 1.5.8, my values values weren't mapping correctly to checkboxes, so I created a generic Checkbox component to use instead of the Formik Field component.

Create a tags input component in ReactJs

We are going to be building the component using ReactJs. Let's start by installing the essentials. First we're going to create a react app using React's CRA or you can use any starter kit to begin with. Let's setup our React app.

Use lodash.debounce inside a function component in React

In this post I'll explain how to debounce a function inside a function react component using lodash.debounce. We'll create a search app that'll search only when there's a gap of 500ms.

React Context API: updating Context from a nested component (in functional components with Hooks and class components)

While developing my recent project, Tabata - Fitness App, I needed to be able to play and pause the video clip of the exercise from another component. So, the simplified diagram of the component tree is as following:

Build a Slideshow Component with ReactJS

Hey there! In this tutorial we are going to build a simple but cool Slideshow component with ReactJS.

Use a ThemeProvider component in Storybook

I frequently use Storybook and styled components / Emotion when building component libraries. The ability to apply a consistent theme to all components is very powerful but it requires wrapping your components in a ThemeProvider.

This week I learned: How to mock a Render Props Component in React

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

How to write a tree-shakable component library

https://github.com/LukasBombach/tree-shakable-component-library

From ReactJS Class Component to Functional Component - useState (Part 1)

Hello everyone, In this post (Two parts) I'll convert a reactjs code from a class component to a functional component. Focusing on useState and useEffect hooks.

let's begin with the part 1 useState hook.

TypeScript Types or Interfaces for React component props

I don't ask myself those questions when I see a type alias though. A type alias feels like a more appropriate language construct for plainly defining what the shape of an object should look like and is more akin to functional-style programming, so it feels more at home with React given how React itself is a functional stab at designing user interfaces. An interface, on the other hand, has a lot of object-oriented baggage associated with it that is irrelevant when we specifically talk about React component props, and object-oriented programming is not React's paradigm.

Difference between Pure Component and Functional Component 🥳

In today's post, I want to share my knowledge and understanding of Pure Component and Functional Component. How they both differ and when to use those and how it reduces the number of re-renders for a Component.

React-Native Custom Tab Component | ReactNative-Navigation.

Add the following styles to it. For this tutorial, we would be making use of a background color for our background for the header component we just created. I use black, but feel free to chose anyone you want, and don't forget to export the function.

How to create an efficient Modal component in React using Hooks and Portals

Line 6: After return create portal using ReactDom.createPortal, As it's first argument we have passed whole modal component and for the second argument we have passed the dom node where we want to render it.

React Grid Component Comparison

How about you? What is your favorite React Grid Component and why?

Setting state for parent from within useEffect hook in child component causes an infinite loop

Previous is app component that calls to a child component in order to render it, and passes to it the setState function. Now we look at the ein component definition:

Next.js 10 Image Optimisation Component and next-optimized-images, a brief comparison

Edit: Since writing this blog I've been able to try the built in Next.js Image optimisation. I found that due to the requirements of either having to specify a width and height or use layout="fill" and a parent component to size the images, it was impossible to allow my image to be dynamically resized by the height of it's container e.g. no more height="100%". This requirement seems to be causing issues to other peoples projects as well. Hopefully they will fix it in the future! For now, I'll be sticking with next-optimized-images

How to Create a Dark Mode Component in React

In this tutorial we are going to show how to bundle the entire dark mode feature into a single <DarkMode /> component that you can take with you and place inside any application.

TypeScript extending ReactJs component from basic

As you see, a functional component is just a function with return. As required, User-Defined Components Must Be Capitalized. Here JSX codes used, with TypeScript file extension 'tsx'. Each JSX element, like

<h1>Hello, world!</h1>

is just syntactic sugar for calling React.createElement(component, props, ...children), as

React.createElement('h1', null, 'Hello, world!')

. So, anything you can do with JSX can also be done with just plain JavaScript. More details please view https://reactjs.org/docs/jsx-in-depth.html. So the example below with pure TypeScript (file extension could be .ts) is equal:

Prop-drilling, React Context and Higher Order Component (HoC)

Let's say you have a Card component that gets the style from the current theme of App, so you end up passing the theme from App to Card, involving all the components in between unnecessarily.

💪 Build Custom Modal/Popup Component In React JS

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework.Below is the demo 😍 of what we will build going towards the end of this tutorial - very beautiful and fully customizable Modal Component.

ReactJS -- If it is setting a state with the same value, will the component be re-rendered?

If v is the same value as before, then the function component won't be re-rendered (the function component won't be called).

How to replace component lifecycle with useEffect hook in React?

Before React 16.8, we were forced to use the class-based component to have access in component lifecycle. And now with Hooks, we are now able to use functional component for state management, data fetching etc. We can now replace component lifecycle like componentDidMount, componentDidUpdate and componentWillUnmount with useEffect in our React component.

🤩 Build Custom Button Component With React JS

This is the first part of many 🛎️ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.

Testing a simple component with React Testing Library

The component I’ve chosen is the AddWord - a simple component with the purpose of adding a new word to the word search game.

This component provides an input field, an “Add” button, and of course some inner logic for word validation and interaction with the external application.

I would like to test this logic using the React Testing library, which has a solid principle of mimicking the user’s interactions and focusing on that instead of the implementation details.

Build a Stunning Breadcrumb Component in React with Plain CSS

Websites like craigslist use a breadcrumb component in their applications to describe the user's location, and in some ways it surprisingly improves their user experience!

Testing your first React Component with Jest and Enzyme

Below is the component we will be testing

Happy React Component coding!