React Components & Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. More info

Articles & Tutorials

React Props Cheatsheet: 10 Patterns You Should Know (
Feb 19, 2021
In this tutorial, we will be reviewing ten patterns you should use when working with props in React.
  • Reed Barger
React Functional Components, Props, and JSX – React.js Tutorial for Beginners (
Nov 05, 2020
In this post, you're going to learn some of the basics of React like creating a component, the JSX syntax, and Props. If you have no or little experience with React, this post is for you.
  • Cem Eygi
Avoid soul-crushing components (
Sep 08, 2020
React components afford us the opportunity to encapsulate state, logic, and markup in a single place. A component is like a magical machine where you pass in props and a beautiful component pops out the other end.
Mastering Props And PropTypes In React (
Aug 17, 2020
Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here.
  • David Adeneye
How to update state from props in React (
May 18, 2020
It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props.
React: Controlled VS Uncontrolled Components (
Apr 27, 2020
Understanding the difference between controlled and uncontrolled React components.
  • Fernando Doglio
React.js for Beginners — Props and State Explained (
Feb 09, 2020
Understanding what props and state are and the differences between them is a big step towards learning React.
  • Cem Eygi
React Conditional Rendering (
Jan 16, 2020
The article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.
Understanding Compound Components in React (
Dec 30, 2019
Compound component pattern may seem a bit tricky at first but don’t worry, by the end of this article you will clearly understand them.
  • Aayush Jaiswal
Control your components (
Dec 10, 2019
A quick and easy guide to creating components that control their own state, if you want them to.
  • Kristofer Selbekk
How to render HTML in React (
Dec 04, 2019
Find out how to render an HTML string in the DOM without escaping, using React.
Understanding React's key prop (
Nov 12, 2019
The key prop is a mechanism for controlling component instances.
Passing Elements as Props in React (
Nov 04, 2019
The middle ground between a props explosion and render props.
  • David Barral
Pass a Parameter Through onClick in React (
Oct 15, 2019
A common thing you will want to learn in React is how to pass a value as a parameter through the onClick event handler. Read on to learn how!
  • James King
Yet another post about React props (
Sep 09, 2019
You could say this topic has been done to death, but lately I’ve started using a technique that I don't recall having come across elsewhere.
  • Jeff M Lowery
How to write a React component without using classes or hooks (
Aug 20, 2019
With the release of React Hooks I have seen a lot of posts comparing class components to functional components. Functional components are nothing new in React, however it was not possible before version 16.8.0 to create a stateful component with access to lifecycle hooks using only a function. Or was it?
  • Matt Thorning
React Fundamentals: Props vs State (
Jul 08, 2019
What's the difference between props and state in React?
The 10 Component Commandments (
Jun 23, 2019
This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.
  • Kristofer Selbekk
What are Reusable Components in React? (
May 26, 2019
In this tutorial, we will step through the process of making a component reusable for our React application.
The beginner’s guide to mastering React props (
May 17, 2019
As you learn how to develop web applications using React, you will inevitably come across the concept of props. Understanding the way props work is essential to mastering React, but to grasp the concept fully is no easy thing.
  • Nathan Sebhastian
What are Controlled Components in React? (
Apr 10, 2019
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 example for controlled components in React.
React List Components by Example (
Apr 06, 2019
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.
React Function Components by Example (
Mar 18, 2019
React Function Components – also known as React Functional Components – are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
Writing Resilient Components (
Mar 16, 2019
There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.
React Component Types: A complete Overview (
Mar 12, 2019
In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.
How Are Function Components Different from Classes? (
Mar 03, 2019
How do React function components differ from React classes? For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.
React: Communication Between Components (
Feb 18, 2019
Understand communication between React components: Render props/props, Context API, React-Redux/Redux and more.
  • Chidume Nnamdi
Dealing with callbacks as props in React (
Feb 17, 2019
React is a great library. It simplifies our work. We don't write all mutations ourselves, we describe result in render functions. Sometimes we have to render huge lists or optimize our code. In those case, we usually use PureComponent and memo. But, if we don't use callbacks correctly we can lose all profit from PureComponent. So, how to deal with callbacks and event listeners in React?
  • Nikita Mostovoy
React Component Composition (
Jan 30, 2019
In this tutorial, I want to step through React’s Component Composition step by step by evolving examples around this React pattern.
4 ways to pass children to React elements (
Jan 28, 2019
Sure, you already know that you can pass children to React elements by nesting JSX tags. But what about the other 3 ways?
Understanding React Default Props (
Jan 22, 2019
In this post, we’ll learn all about default props in React. It will help us not only become better developers but to provide a better experience for our users.
  • Chidume Nnamdi
Beware of the Apropcalypse! (
Jan 18, 2019
Today, let’s talk about the Avatar component.
Order of props matters! (
Jan 11, 2019
Let’s start with a simple React component which renders an anchor tag.
How to create components (
Dec 22, 2018
React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!
  • Kristofer Selbekk
Don't create conflicting props (
Dec 21, 2018
When it comes to React components, props are the API that developers consume. A good API should be obvious, something the developer can guess. You want to make it easier for the developer to implement their feature and move on.
A New Approach to React Component Design (
Dec 10, 2018
In 2015, Dan Abramov wrote an article, Presentational and Container Components, that React new-comers misconstrued as commandments.
  • Austin Malerba
Why is this so hard? (
Dec 03, 2018
I've lost count of the number of times I forgot to bind this. Why do we need to bind this and how should we do it?
  • Svein Petter Gjøby
How to change the state of a child component from its parent in React (
Nov 05, 2018
We will be building a simple React app which shows the real name of a superhero on a button click.
  • Johny Thomas
React Props (
Oct 30, 2018
How to use props to pass data around your React components
How to conditionally set default props (
Oct 22, 2018
The defaultProps object on React components doesn't have access to this.props. So how can I make default props depend on other props?
How to pass data to props.children (
Oct 17, 2018
React makes it easy to pass children to reusable components. But what if those children need to receive data from the component that renders them?
These React Fundamentals You Skip may be Killing You (
Oct 05, 2018
Often times, the inability to debug a certain error stems from not understanding some foundational concept.
  • Ohans Emmanuel
3 Anti-patterns for Conditional Rendering with React (
Sep 21, 2018
You already know how to implement conditionally rendering with React: just use JavaScript! This gives you a huge amount of power... to shoot yourself in the foot.
Power of “keys” in React.js (
Sep 04, 2018
Keys help React identify which items have changed, are added, or are removed.
  • Arwa Lokhandwala
Props and PropTypes in React (
Aug 31, 2018
React calls the data passed between components props and we’re going to look into those in great detail.
  • Kingsley Silas
Computed Properties in React (
Aug 14, 2018
Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in. This post covers how to achieve the same result in React.
Pass Multiple Children to a React Component with Slots (
Jul 31, 2018
You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable.
How to pass props to components in React (
Jul 29, 2018
In this guide, I want to explain React props in greater detail.
When to break up a component into multiple components (
Jul 16, 2018
At what point does it make sense to break a single component into multiple components?
Prop Drilling (
May 21, 2018
What it is, why it’s good, why it’s bad, and how to avoid common problems with it.
How to Bind this in React Without a Constructor (
Apr 25, 2018
this in React is a reference to the current component. Usually this in React is bound to its built-in methods so that when you want to update state or use an event handler on a form, you could do something like this
  • Tiffany White
Class property initializers (
Dec 17, 2017
Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!
  • Kristofer Selbekk
8 Key React Component Decisions (
Oct 02, 2017
Standardize your React development with these key decisions
DOM Attributes in React 16 (
Sep 08, 2017
In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it.
When to use Component or PureComponent (
Aug 29, 2017
Let’s dig in to PureComponent and understand why we should be using it.
  • Paul Christophe
Extracting Logic from React Components (
Jul 17, 2017
In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post.
Techniques for decomposing React components (
Jun 18, 2017
React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much.
  • David Tang
Advanced List in React - Build a powerful Component (Part III) (
Jun 13, 2017
This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination.
Infinite Scroll in React - Build a powerful Component (Part II) (
Jun 07, 2017
This part introduces infinite scroll in React in an elegant way by using higher order components. You will implement an infinite scrolling higher order component.
Paginated List in React - Build a powerful Component (Part I) (
May 29, 2017
The first part of the series covers the paginated List component in React.
Renderless Components (
Feb 23, 2017
or How Logic Doesn't Always Need a UI
  • Kyle Shevlin
How to Dynamically Render React Components (
Feb 08, 2017
I am currently working on a React/Redux universally rendered application at work. It has some fun parts and I want to share what I've learned from building them.
  • Kyle Shevlin

Video Guides & Talks

Accepting and cloning a react element as a prop (
Feb 11, 2019
This is a situation I faced while working on and thought you all would find it interesting!
How you can choose what goes in what component? (
May 03, 2018
A question everybody asks: How do I decide what's in my component? When should I split it up? How many abstractions should I build?
Render prop or function as children? (
Apr 27, 2018
Make your users happy, keep their codebase consistent, support both patterns.
Does the key prop still matter? (
Apr 20, 2018
React will yell at you, if you render a list and don't give each element a unique key. But does it really matter?
How React components talk to each other (
Apr 14, 2018
Yesterday we said that props flow down and callbacks fly back up. Today we're putting that into practice with some code.
Props flow down callbacks fly up (
Apr 13, 2018
How do you share state between components? With React (and Vue) we like to keep our dataflow unidirectional. That means we hoist state to the least common denominator, pass it down via props, and change it back up with callbacks.
Why you need both state and props (
Apr 10, 2018
Both state and props are just JavaScript values that you use when rendering JSX. So why do you need both?
Your First React Component (
Apr 08, 2018
We're building towards a chat app 💬
Why are components so great (
Apr 06, 2018
React, Vue, Angular, or whatever. Components are the future and you should learn how to think in them. Here's why.
The Component is King for Modern Web Development (
Dec 14, 2017
Swizec Teller talks about how components are the future of web development.
Tiny bites: React's key prop (
Nov 17, 2017
The key prop looks simple but can be tricky somtimes!

Courses & Video Series

React: Components, Context, and Accessibility (
Jul 17, 2018
Learn about the enhancements found in React 16 and how to leverage key features to build better React apps

Podcast Episodes

Why I Prefer Functional Components (
Sep 04, 2018
In this episode, the panel talks with Josh St. Jacque who is married with two kids and with one on the way. He is a professional product manager and software engineer. Ruby on Rails got him started on his career path and journey. Check-out today’s episode where the panel discusses functional and class components, among many other things!