Using props to pass data from a parent to a child component

The props system in React is a system for passing data from a parent component to a child or a nested component. The props system communicates data from the parent down with the ultimate goal of customizing the child.

The overall goal of components is to either show some content to the user or react to user interaction. So the whole purpose of props is to customize those two things. There's almost no limit to the amount of information that we can share using this prop system.

When we use the prop system there's kind of two stages:

1. We want to provide information from the parent to the child and
2. The child consumes or makes use of that information.

Providing props from parent to child looks like this:

const Parent = () => {
  return (
    <div>
      <Child propName="propValue" />
    </div>
    )
  }

We'll use curly braces if we're referencing a Javascript variable:

const propValue = "name"

const Parent = () => {
  return (
    <div>
      <Child propName={propValue} />
    </div>
    )
  }

With multiple child components, each unique prop is only being passed to its one very particular component:

const Parent = () => {
  return (
    <div>
      <Child propName="Bill" />
      <Child propName="Erin" />
    </div>
  )
}

To consume the information in the child component, we need to somehow get access to the prop that we have provided. We have to pass the child component an argument that we refer to as props. To consume the props, we have to pass it props.propName.

const Child = (props) => {
  return (
    <div>
      Hello my name is, {props.propName}
     <div>
  )
}