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;
Following your comments above.
In other to display each project's text in a p tag
You should:
Project component accept another prop value called text similar to img and linkp in the Project componenttext into the Project component in the mapCheckout 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>
);
};