Question

0

108

Visualizações

Where to add a p tag in line of code React

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;

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-01T01:05:14.899Z

Following your comments above.

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

You should:

Make the Project component accept another prop value called text similar to img and link
Use interpolation ({}) to display it within the p in the Project component
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>
  );
};

0

108

Where to add a p tag in line of code React

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT