Understanding Props

The Greeting component from the Components chapter always returns <h1>Hello, Alice!</h1>. To greet Bob, you would have to copy the whole component and change one word. A better design writes the component once and lets each parent tell it which name to show. The values a parent hands to a child component in this way are called props, which is short for properties.

Props work much like the arguments of a JavaScript function. The parent decides the values, and the child uses them to decide what to display. Because of this, one component can show different content each time it is used