Me gustaría decir que esta es la primera vez que uso Stack Overflow y me disculpo si no lo explico bien porque no estoy seguro de cómo expresarlo.
Estoy tratando de hacer un currículum con una lista de trabajo en mi sitio web. El caso es que tengo algunos que tienen una viñeta y otros con múltiples puntos. Quiero llamar a un accesorio que me permitirá actualizar la matriz en Resume.js pero declararlo generalizado para que cree una lista, usando la matriz para cada elemento individual.
Declaro:
let job = []Porque recibo un error que indica que no está definido, pero me gustaría usar un accesorio o algo así para llamarlo y crear diferentes matrices cada vez que llamo a func. Reanudar elemento de trabajo.
function ResumeWorkItem(props) { {/*Trying to use JobList to create the array but I am not sure how to call it lower down.*/} let job = [] const JobList = job.map((job, index) => <li key={index}> {job.toString()} </li> ); return( <> <div className="res__work"> <div> <h2 className='res__work__title'> {props.title} </h2> </div> <div> <h3 className='res__work__jobtitle'> {props.jobtitle} </h3> </div> <div className='res__work__info'> <ul>{JobList}</ul> {/*This is where I call JobList, but I want to set up job in Resume.js .*/} </div> </div> </> ); }Aquí es donde quiero llamar a la matriz en el archivo Resume.js:
<section className="res-work-exp"> <ResumeWorkItem title = 'Title 1' jobtitle = 'Job Title 1' {/* This is where I want to call array 1*/} /> <ResumeWorkItem title='Title 2' jobtitle='Job Title 2' {/* This is where I want to call array 2*/} />Me disculpo si no me expliqué lo suficientemente bien. Pongo algunos comentarios para ver si eso me ayuda a entender mi punto.
Hice JobList en una función para tomar una lista de elementos que podrían mapearse como sugirió y luego llamarlo desde ResumeWorkItem . También puede mover ResumeWorkItem a App.js e importar JobList si lo desea. Considere la siguiente muestra :
App.js import React from 'react'; import './style.css'; import { ResumeWorkItem } from './Resume.js'; export default function App() { return ( <section className="res-work-exp"> <ResumeWorkItem title="Title 1" jobtitle="Job Title 1" joblist={[1, 2, 3]} /> <ResumeWorkItem title="Title 2" jobtitle="Job Title 2" /> </section> ); }Resume.js import React from 'react'; export const JobList = (jobs) => jobs.map((job, index) => <li key={index}>{job.toString()}</li>); export function ResumeWorkItem(props) { return ( <> <div className="res__work"> <div> <h2 className="res__work__title">{props.title}</h2> </div> <div> <h3 className="res__work__jobtitle">{props.jobtitle}</h3> </div> <div className="res__work__info"> <ul>{props.joblist ? JobList(props.joblist) : ''}</ul> </div> </div> </> ); }