React Props — All You Need To Know

Hey Folks! This article summarizes various concepts in React props. Discover more articles like this at usereactjs.com. Cheers!

Table of contents

1. Props
   — Usage
   — Key characteristics of props
   — When component props defaults to true?
2. Supported Data Types For Props
3. What Is Props Forwarding?
4. Default Props
5. Render Props
6. Children Prop
7. React.Children API
   — Usage
   — Why React.Children API is not preferred?
8. Alternatives To Using React.Children
   — Exposing multiple components
   — Accepting an array of objects as a prop
   — Using render props for customization
9. Type Checking In Props
   — PropTypes
   — TypeScript
10. Key Prop​
    — Rules of keys​
    — Impact of giving array indices as key​

Props​

In React, “props” is short for “properties.” React components use props to communicate with each other.

Props are read-only values (similar to HTML-tag attributes) that are passed from a parent component to a child component. They are used to customize and configure the behavior of a child component.

Usage​