React Props

Components receive their data in the form of props. Think of props just like any parameter you would pass into a function. For example, if we wanted to make the header text of the example above more flexible, we could pass the text as a prop.

// PageHeader.tsx
import React from 'react'

interface Props {
  text: string
}

function PageHeader (props: Props) {
  return (
    <header>
      <h1>{props.text}</h1>
    </header>
  )
}

export default PageHeader

Notice how it is using props.text to get the value. This prop is passed in using what looks like an HTML attribute of the same name, text. Props can be named anything that is a valid JavaScript identifier.

// App.tsx
import React from 'react'
import PageHeader from './PageHeader'

function App () {
  return (
    <div>
      <PageHeader text="This Page is About Cats" />
    </div>
  )
}

export default App

The code above will pass the text "This Page is About Cats" into the PageHeader component (function), which will then use the text to return the HTML for the header section.