Since I'm having these codes in my React component and I don't want to repeat the same code again and again.
Is there is any way to use the DRY principle?
I'm making a landing page with sass styling and I found that I'm repeating the same code again and again.
<article className="about-company">
ABOUT THE COMPANY
<div className="company">
<p>Founded</p>
<p>2002</p>
</div>
<div className="company">
<p>Employees</p>
<p>10,000 - 15,000</p>
</div>
<div className="company">
<p>Revenue</p>
<p>Confidential</p>
</div>
<div className="company">
<p>Serios</p>
<p>Serious B</p>
</div>
<div className="company">
<p>Raised</p>
<p>$ 27M</p>
</div>
<div className="company">
<p>Industry</p>
<p>Technology</p>
</div>
</article>
<article className="about-company">
ABOUT THE ROLE
<div className="company">
<p>Type</p>
<p>Full-time</p>
</div>
<div className="company">
<p>Total Compansation</p>
<p>$150,000 to $180,000</p>
</div>
<div className="company">
<p>Equity / Options</p>
<p>Yes</p>
</div>
<div className="company">
<p>Travel</p>
<p>Required 10% Travel</p>
</div>
<div className="company">
<p>Work from Home</p>
<p>One Day a Week</p>
</div>
</article>
These are my codes. Can anyone help me to get rid of these.
Put the values in an array, then iterate.
let data = [{a:"Founded",b:"2002"},{a:"a",b:"b"}];
data.map((item) => (
<div>
<p>{item.a}</p>
<p>{item.b}</p>
</div>