extends/inherit parent component in function

Question

export default function PageTemplate() {
  return (
    <div className="layout">
      <LeftMenu />

      <div className="content">

        <TopMenu />

        <div id="other-contents">
          // Contents goes here
        </div>
      </div>
    </div>
  );
}


export default function Index() {
  return (
    <div className="layout">
      <LeftMenu />

      <div className="content">

        <TopMenu />

        <div id="other-contents">
          <h2>I am Index Page<h2/>
        </div>
      </div>
    </div>
  );
}

As you can see most of my contents goes in #other-contents, I will be repeating PageTemplate for every page, I wondering if there is way to just re-use PageTemplate. Instead of repeating code, I would just do something like extends/inherit/whatever possible and reduce the code in Index

I believe this is easier achieved with Class Based Component. But I am wondering if there could function based solution

Drew Reese · Accepted Answer · 2020-10-11 18:37:14Z

2

React prefers Composition over Inheritance. Use the children prop all react components have.

export default function PageTemplate({ children }) {
  return (
    <div className="layout">
      <LeftMenu />

      <div className="content">

        <TopMenu />

        <div id="other-contents">
          {children}
        </div>
      </div>
    </div>
  );
}

Usage:

<PageTemplate>
  // <-- render any content you want here
</PageTemplate>

answered Oct 11, 2020 at 18:37

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paullo Over a year ago

With this if you are to re-write Index, what will it look like?

Drew Reese Over a year ago

@Paullo Something like this: <PageTemplate><h2>I am Index Page<h2/></PageTemplate>?

Collectives™ on Stack Overflow

extends/inherit parent component in function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related