CODEWITHSUNDEEP
reactjs
Pierre Torres
Pierre Torres

Reputation: 287

Create a dynamic component instead of duplicating Reactjs

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

Upvotes: 0

Views: 33

Answers (1)

Eric
Eric

Reputation: 1347

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>);
};

Upvotes: 2

Related Questions