如何不在 React 组件中重复 html(jsx) 标签？

Question

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.

Answer 1

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>