I'm making a portfolio website in ReactJS. I'm trying to display an array of text under desc in HomePageContent.js. I'm not sure how display each of the paragraphs. I think I have to map the paragraphs, but I'm not sure how to do that.

Relevent Code

HomePageContent.js

// Image import statements

import Im1 from '../img/Im1.png';

import Im2 from '../img/Im2.jpg';

import Im3 from '../img/Im3.jpg';



let HomePageContent = {

  job: [{

    logo: Im1,

    alt: 'Logo1',

    companyName: 'comp1' ,

    link: 'link1',

    title: 't1',

    duration: 'dur1',

    location: 'loc1',

    desc: {

      text: 'p1',

      text: 'p2',

      text: 'p3',

      text: 'p4'

    },

    id: 1

  }



export default HomePageContent;

Job.js

import React from 'react';



import '../css/Experience.css';



function Job(props) {

  console.log(props.name);

  const jobList = props.job.map(j =>

    <div className='exp-container'>

      <img src={j.logo} alt={j.alt} />

      <div className='description'>

        <div>

          <a href={j.link} rel='noopener noreferrer' target='_blank'>

            {j.companyName}

          </a>

        </div>

        <div>{j.title}</div>

        <div>{j.duration}</div>

        <div>{j.location}</div>

        <div><p>{j.desc}</p></div>

      </div>

    </div>

  )



  return (

    <div>{jobList}</div>

  );

}



export default Job;