Search⌘ K
Home
Courses
The Road to React: The One with Hooks

React Component Composition

Explore how to use React's children prop to compose components, allowing you to render dynamic and nested content between component tags. Understand how this approach mimics HTML element behavior and enhances component flexibility.

We'll cover the following...

Now we’ll discover how to use a React element in the same fashion as an HTML element, with an opening and closing tag:

Node.js
const App = () => {
  ...
  return (
    <div>
      <h1>My Hacker Stories</h1>
      <InputWithLabel
        id="search"
        value={searchTerm}
        onInputChange={handleSearch}
      >
        Search
      </InputWithLabel>
      ...
    </div>
  );
};

Instead of using the label prop from before, we inserted the text “Search:” between the component’s element’s tags. In the InputWithLabel component, you have access to this information via ...