如何使用 props 来防止 React 中的重复？

Question

如何使用 props 来防止代码中出现这种重复？

import React from "react";

export const FindUs = () => {
  return (
    <div className="p-[6%]">
      <div className="  text-landing-title font-semibold text-4xl ">
        Find us
      </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
          Address
        </div>
        <div className="text-landing-text font-normal text-sm leading-5  pt-2">
         
        </div>
      </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
          Email Address
        </div>
        <div className="text-landing-text font-normal text-sm leading-5  pt-2">
          
        </div>
      </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
          Phone Number
        </div>
        <div className="text-landing-text font-normal text-sm leading-5  pt-2">
         
        </div>
      </div>
    </div>
  );
};

Answer 1

import React from "react";

const Item = ({item}) => (
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
          {item}
        </div>
        <div className="text-landing-text font-normal text-sm leading-5  pt-2">
         
        </div>
      </div>
)

export const FindUs = () => {
  return (
    <div className="p-[6%]">
      <div className="  text-landing-title font-semibold text-4xl ">
        Find us
      </div>
      {['Address', 'Email Address','Phone Number'].map(item => <Item key={item} item={item} /> }
       
    </div>
  );
};