Create a dynamic component instead of duplicating Reactjs

Question

I'm trying to improve my React code, and I would like to know if instead of duplicating components with different variables, there was a possibility to create a single component and modify the variables?

 <Card>
       <CardTitle>Hey</CardTitle>
       <CardTexte>Text</CardTexte>
       <CardButton>Yo</CardButton>
     </Card>

     <Card>
       <CardTitle>Hey</CardTitle>
       <CardTexte>Text</CardTexte>
       <CardButton>Yo</CardButton>
     </Card>

    <Card>
    <CardTitle>Hey</CardTitle>
    <CardTexte>Text</CardTexte>
    <CardButton>Yo</CardButton>
    </Card>

Thanks for your time

Eric · Accepted Answer · 2021-03-16 15:56:08Z

2

If your components have the same sub-components and same style, you can use a wrapper to create a new component.

const WrapperComponent = ({ title, text, buttonText }) => {
  return (<Card>
    <CardTitle>{title}</CardTitle>
    <CardTexte>{text}</CardTexte>
    <CardButton>{buttonText}</CardButton>
    </Card>);
};

answered Mar 16, 2021 at 15:56

Eric

1,3771 gold badge11 silver badges8 bronze badges

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

1 Comment

Pierre Torres Over a year ago

And how to call this component ?

Collectives™ on Stack Overflow

Create a dynamic component instead of duplicating Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related