使用键为项目列表调用数组。 反应.js

Question

I would like to say that this is my first time using Stack Overflow and I apologize if I don't explain this well because I am not sure how to word it.

I am trying to make a resume with a worklist on my website. The thing is I have some that have one bullet point and others with multiple points. I want to call a prop that will allow me to update the array on Resume.js but declare generalize it so it will create a list, using the array for each individual item.

I declare:

let job = []

Because I get an error stating it is undefined, but I would like to use a prop or something like it to call it down to create different arrays for each time I call func. ResumeWorkItem.

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>
        </>
    );
}

Here is where I want to call the array in file 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*/}
                        />

I apologize if I didn't explain this well enough. I put a few comments to see if that will help get my point across.

Answer 1

I've made JobList into a function to take in list of items that could be mapped as you've suggested and then call it from ResumeWorkItem . You could also move ResumeWorkItem to App.js and import JobList if you want. Consider the following sample :

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>
    </>
  );
}