Composition in React for dummies

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:

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:

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).

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:

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!