Where to add a p tag in line of code React

Question

I have two component where I am rendering images and links from a data js file. I would also like to generate a paragraph but am unsure where I can call the paragraph tag to generate it on both my ProjectList.js and Project.js components. I'd like it to be just under the image.

Project.js

import "./project.css";

const Project = ({ img, link }) => {
  return (
    <div className="p">
      <div className="p-browser">
        <div className="p-circle">Tick</div>
        <div className="p-circle"></div>
        <div className="p-circle"></div>
      </div>
      <a href={link} target="_blank">
        <img src={img} alt="" className="p-img" />
        <p>kscjksnkdjs</p>
      </a>
      <div className="p-right">
        <div className="p-bg"></div>
      </div>
    </div>
  );
};

export default Project;

ProjectList.js

import "./projectList.css";
import Project from "../project/Project";
import { projects } from "../../data";

const ProjectList = () => {
  //   console.log(projects);
  return (
    <div className="pl">
      <div className="pl-texts">
        <h1 className="pl-title">Projects</h1>
        <p className="pl-description">
          {/* Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sunt ad
          vitae. Quo maxime quos odit? Fuga omnis suscipit numquam adipisci unde
          aliquid vel deleniti ex eos excepturi. Atque, nostrum. */}
        </p>
      </div>
      <div className="pl-list">
        {projects.map((project) => (
          <Project key={project.id} img={project.img} link={project.link} />
        ))}
      </div>
      <div className="text">thsisihsjihih</div>
      <div className="pl-right">
        <div className="pl-bg"></div>
      </div>
    </div>
  );
};

export default ProjectList;

Answer 1

Following your comments above.

In other to display each project's text in a p tag

You should:

1. Make the Project component accept another prop value called text similar to img and link
2. Use interpolation ({}) to display it within the p in the Project component
3. Then pass each project's text into the Project component in the map

Checkout the code example below

// Project component
const Project = ({ img, link, text }) => {
  return (
    <div className="p">

      ...rest of the code block
    
      <a href={link} target="_blank">
        <img src={img} alt="" className="p-img" />
        <p>{text}</p>
      </a>

      ...rest of the code block

    </div>
  );
};

// ProjectList
...rest of the code block

{projects.map((project) => ( 
  <Project key={project.id} img={project.img} link={project.link} text={project.text}/>
))}

...rest of the code block

Also, if you wish to display a project's text in the p tag within your ProjectList component then you must pick one project from the list of projects.

You can pick and display the first project in the list using the zero index like this

// ProjectList
const ProjectList = () => {
  //   console.log(projects);
  return (
    <div className="pl">
      <div className="pl-texts">

       ...rest of the code block

        <p className="pl-description">
          {projects[0].text}
        </p>

       ...rest of the code block

      </div>
    </div>
  );
};