# React - props.children {% hint style="info" %} HTML files would get rendered into PowerPoint-style presentations. Usually two columns per slide (see the row and col classes in the snippets).\ I added markdown section headings to make reading easier and only included several slides to showcase the format of files I've been working with {% endhint %} ## Composition and props.children ```html

Composition and
props.children

Composition vs. inheritance

You know the concept of inheritance from object-oriented programming. It means that a class can extend another class with new functionalities.

While this is a good programming paradigm, it does not apply to React.

Beginner React programmers sometimes want to create components using inheritance (after all, we use classes).

For example, it may seem that a yes/no message and an informational message can and should inherit from a common, generic message component.

This is not the case, however – in React, composition is always preferred.

``` ## Composition ```html

Composition

Composition means that more specific components return the more generic ones in their output. Let's look at the example.

The App component returns components:

  • Wrapper
  • Child

The Wrapper component has the Child component nested in it when it is called in the App. How does it display its content?

Through props.children. The result of the nested Child component is under the children key in the props. 

const App = () => {
  return (
    <Wrapper title="I am the wrapper">
      <Child body="Child component" />
    </Wrapper>
  );
};

const Wrapper = (props) => {
  return (
    <div className="wrapper">
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
};

const Child = (props) => {
  return <p>{props.body}</p>;
};
``` ## Composition - slide 2 ```html

Composition

Using props.children or this.props.children (in the case of a class component) we get all the elements and components that are placed as children of this component, i.e. the Child component. 

const Wrapper = () => {
  return (
    <div className="wrapper">
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
};
``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://krzysztof-wierzbicki.gitbook.io/main/writing-samples/2022-2-front-end-react-composition-props-children.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.