React Props

Props is how Components get their properties. Starting from the top component, every child component gets its props from the parent.

In a function component, props are the object passed as the function argument. Destructuring them in the signature keeps the JSX clear:

const BlogPostExcerpt = ({ title, description }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

You can also take the whole object as props and write props.title, if you prefer.

Passing props down to child components is a great way to pass values around in your application. A component either holds data (has state) or receives data through its props.

It gets complicated when:

• you need to access the state of a component from a child that’s several levels down (all the previous children need to act as a pass-through, even if they do not need to know the state, complicating things)
• you need to access the state of a component from a completely unrelated component.

For those cases React has the Context API, and there are state libraries like Redux. Props stay the default way to pass data from a parent to a child.

Default values for props

If a prop is optional, give it a default. In function components, default parameters are the straightforward way:

const BlogPostExcerpt = ({ title = '', description = '' }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

If the parent omits title or description, you still render empty strings instead of undefined.

How props are passed

When initializing a component, pass the props in a way similar to HTML attributes:

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

We passed the title as a plain string (something we can only do with strings!), and description as a variable.

Children

A special prop is children. That contains the value of anything that is passed in the body of the component, for example:

<BlogPostExcerpt title="A blog post" description={desc}>
  Something
</BlogPostExcerpt>

Inside BlogPostExcerpt you read that content from children:

const BlogPostExcerpt = ({ title, description, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      {children}
    </div>
  )
}

While props allow a component to receive properties from its parent, to be “instructed” to print some data for example, state allows a component to take on life itself, and be independent of the surrounding environment.

Class components, PropTypes, and defaultProps (legacy)

In a class component, props arrive as this.props with no extra setup:

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
        {this.props.children}
      </div>
    )
  }
}

Older code often documented props with PropTypes and set defaults with defaultProps:

import PropTypes from 'prop-types'

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = {
  title: '',
  description: ''
}

You will still find this in many codebases, but React 19 removed both features for function components. The propTypes check is gone from React, so the assignment above is silently ignored (you get no warning even when a prop has the wrong type). defaultProps is ignored on function components too, and only keeps working on classes. In the example above, a BlogPostExcerpt written as a function would render undefined for a missing title, not ''.

So for a function component use default parameters, as shown earlier, and TypeScript if you want the props checked.

Want me to talk about your product? You can sponsor this site.