React Object usage

const namesArr = [
    {id:1, text:'F&B',},
    {id:2, text:'개발',}, 
    {id:3, text:'건설, 시설'},
    {id:4, text:'게임, 제작' },
    {id:5, text:'경영, 비지니스'},
    {id:6, text:'고객서비스, 리테일'},
    {id:7, text:'디자인'},
    {id:8, text:'마케팅, 광고'},
    {id:9, text:'물류, 무역'},
    {id:10, text:'미디어'},
    {id:11, text:'법률, 법집행기관'},
    {id:12, text:'엔지니어링, 설계'},
    {id:13, text:'영업'},
    {id:14, text:'의료, 제약, 바이오'},
    {id:15, text:'인사, 교육'},
    {id:16, text:'정부, 비영리'},
    {id:17, text:'제조, 생산'},
    {id:18, text:'투자, 분석, 부동산'}
]


const nameList = namesArr.map((name) =>{
     return(
    <CategoryTab text={name.text}/>
  )
})

class NavBody extends Component {
    render(){
        return (
            <>
                {nameList}
            </>
  );
    }
}

export default NavBody

function CategoryTab(props) {
    return (
        <div className="NavBody_in ">
            <div className ="NavBody_intext">
              {props.text}
            </div>
        </div>
    )
}

export default CategoryTab

const bodyArr= [

        {id:1,img:"https://static.wanted.co.kr/images/company/1478/eq9xexi0y668srgp__400_400.jpg",data:'DevOps엔지니어',data_A:'에어프레미아',data_B:'서울.한국',data_R:'채용보상금 1,000,000원'},
        {id:2,img:"https://static.wanted.co.kr/images/company/506/hupyg19h2skogwa8__400_400.jpg",data: 'PHP 웹 개발자',data_A:'이랜서',data_B:'서울.한국',data_R:'채용보상금 1,000,000원'},
        {id:3,img:"https://static.wanted.co.kr/images/company/11301/wv7selzq3z4ckrcz__400_400.jpg",data: 'Backend 개발자',data_A:'빅케어',data_B:'서울.한국',data_R:'채용보상금 1,000,000원'}
        
      ]
          
      const bodyList = bodyArr.map((name) =>{
       return(
        <MainElement img={name.img}  data={name.data} data_A={name.data_A} data_B={name.data_B}data_R={name.data_R}/>
        )
      })

     class MainBody extends React.Component {
      render(){
        return (
           <>
             {bodyList}
           </>
       );
      }
     }

    export default MainBody
    

function MainElement(props) {
    return (
        <div className="Main_body_in">
        <div className="Main_header">
        <img src={`${props.img}`} alt="img"></img>
        </div>
        
        <div className="Main_text">
        <span className="Main_text_top">{props.data}</span>
        <span className="Main_text_body">{props.data_A}</span>
        <span className="Main_text_body">{props.data_B}</span>
        <span className="Main_text_end"> {props.data_R}</span>
        </div>
        </div>
            )
}

export default MainElement;
        ```