How to display array of text in react?

Question

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;

Kevin Hoopes · Accepted Answer · 2020-08-20 02:41:40Z

1

You're right, mapping over the paragraphs would work, but I recommend changing the value inside desc to an array so that you have an easier time doing that.

...
desc: [
      'p1',
      'p2',
      'p3',
      'p4',
    ],
...

Then, in your JSX, you can map over it and put each of them in their own set of <p> tags.

<div>
   {j.desc.map(paragraph => <p>{paragraph}</p>)}
</div>

This works because the map function returns an array of whatever you return in the provided fat arrow function, and JSX will automatically render an array of JSX elements one right after the other. So it looks like this in the rendered HTML:

<div>
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
   <p>p4</p>
</div>

answered Aug 20, 2020 at 2:41

Kevin Hoopes

5173 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display array of text in react?

Relevent Code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Relevent Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related