Tengo dos componentes en los que renderizo imágenes y enlaces desde un archivo js de datos. También me gustaría generar un párrafo, pero no estoy seguro de dónde puedo llamar a la etiqueta de párrafo para generarla en mis componentes ProjectList.js y Project.js. Me gustaría que fuera justo debajo de la imagen.
Proyecto.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;Siguiendo tus comentarios anteriores.
En otro para mostrar el texto de cada proyecto en una etiqueta p
Debería:
Project acepte otro valor de propiedad llamado text similar a img y linkp en el componente Projecttext de cada proyecto al componente Project en el mapConsulte el ejemplo de código a continuación
// 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 Además, si desea mostrar el texto de un proyecto en la etiqueta p dentro de su componente ProjectList , debe elegir un proyecto de la lista de proyectos.
Puede elegir y mostrar el primer proyecto en la lista usando el índice cero como este
// 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> ); };