Composition in React for dummies
Tags: react, javascript
Published: 2021-08-05 12:02:01

After a couple of decades 👩‍💻, I've come to the conclusion that **programming is like doing Math and Sociology**: There's too much structure and some of it does not make any sense at all.😁🤯 

Drawing from my Sociology classes, Durkheim's notion that "the whole is greater than the sum of its parts" somehow fits the idea of **composition in React**. Composition is the act of combining parts to form a whole. Now, in Algebra (here comes the Math part 😀), given two functions, composition is applying the function f 🍞 to the output of function g 🥪 (while stating that both f and g don't know that the other function exists, that is). Although this is a very important concept, I will not discuss this here, because it might make you fall asleep if you think a lot about it...😴.

Back to React, to make components trully reusable🚀 and configurable🚀, the 'props' concepts is used to pass data from one component to the other. It is important that a component's property values are not set within the component itself. I mean think about it, if you were to set the component's property values within the component, then this would always return the same result for the same arguments. But we want to reuse this component so we need to be able to set 'props' as we see fit.

> All react components must act like pure functions with respect to their properties ('props').

In the following function `TabsMenuItem`, `props` is the object that holds all the properties. These properties are set, not in the TabsMenuItem component but in the component that imports the TabsMenuItem (e.g., the App). Note that `props` can have any other name, it doesn't have to be props.

So, here's an **example of a TabsMenuItem component**:

```jsx
function TabsMenuItem(props) {
  return (
    <div>
      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
        <a>{props.tabMenuItem2}</a>
      //and so on
```

And then, this is how its properties are defined in the **App**:

 ```jsx
function App() {
  return (
          <TabsMenuItem
            tabMenuItem1="First tab label"
            tabMenuItem2="Second tab label"
//and so on
```

Perfect!👌 Now, time to introduce the **composition** concept or, in other words, the children 🧸! 

The **children-parent relationship** happens when we want to introduce a parent; for instance, if I would like to **wrap** the TabsMenuItem component (the children) in a PanelItem component (the parent).  

```jsx
function PanelItem(props) {
  return (
    <div>
      <article className="panel is-primary">
        {props.children}
      </article>
    </div>
  );
}
```

The above will not work, unless I put the children where I want them to be, using the infamous `props.children`. Notice that `props` holds the object of the children. 

Of course, I have to import the PanelItem to the TabsMenuItem component and then insert `PanelItem` like this:

```jsx
function TabsMenuItem(props) {
  return (
    <div>
      <PanelItem>

      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
       //and so on

      </PanelItem>
```

> Inheritance is about the relationship of an **ancestor** and a **descendant** whereas composition is about a **parent** and their **child**.

I think with this example Composition actually makes sense to any person starting with React. 😊 Let me know what you think! Good luck with your programming efforts!