If it is not obvious React components can make use of other React components. That is, when defining a component the
render configuration function can contain references to other components. When a component contains another component it can be said that the parent component owns the child component (aka composition).
In the code below the
BadgeList component contains/owns the
This code was purposefully simplistic in order to demonstrate component composition. In the next chapter, we will look at how the code will typically be written making use of props to create a generic
Badge component. The generic Badge component can take any name value v.s. creating a unique badge and hard coding the name in the component.
- A key tenet of maintainable UI are composable components. React components by design are meant to contain other React components.
- Notice how HTML and previously defined components are mixed together in the