I’ve been really pulling my hair out over this bug as I’ve been troubleshooting it for the past few days and haven’t found any reliable answers.
My goal is to be able to route to an individual component, [http://localhost:4000/hris/employees/1] and show that individual ’employee’ card on a routed page.
In my App.js component, I believe I have everything routed properly:
<Route exact path="/hris/employees">
<Employees
employees={employees}
setEmployees={setEmployees}
addresses={addresses}
setAddresses={setAddresses}
zips={zips}
setZips={setZips}
skills={skills}
setSkills={setSkills}
onSubmitNewEmployee={onSubmitNewEmployee}
onSubmitNewSkill={onSubmitNewSkill}
onSubmitNewAddress={onSubmitNewAddress}
displayCard={displayCard}
setDisplayCard={setDisplayCard}
/>
</Route>
<Route exact path="/hris/employees/:id">
<Employee />
</Route>
Then here is the Employees.js component:
import React from "react"
import Employee from './Employee'
import EmployeeForm from './EmployeeForm'
function Employees({
employees,
setEmployees,
addresses,
setAddresses,
zips,
setZips,
skills,
setSkills,
onShowDetails,
displayCard,
setDisplayCard
}) {
return (
<div>
<div className="container">
<h1>Employees</h1>
<br/>
<div className="card-container">
<div className="cards">
{employees.length > 0 ?
employees.map(employee =>
<Employee
key={employee.id}
employee={employee}
test={console.log(employee.id)}
/>) : null }
</div>
</div>
<br />
<div>
<EmployeeForm
employees={employees}
setEmployees={setEmployees}
addresses={addresses}
setAddresses={setAddresses}
zips={zips}
setZips={setZips}
skills={skills}
setSkills={setSkills}
onShowDetails={onShowDetails}
displayCard={displayCard}
setDisplayCard={setDisplayCard}
/>
</div>
</div>
</div>
)
}
export default Employees
The important code to look at here is the following:
<div className="card-container">
<div className="cards">
{employees.length > 0 ?
employees.map(employee =>
<Employee
key={employee.id}
employee={employee}
test={console.log(employee.id)}
/>) : null }
</div>
</div>
With this, the <Employee /> component is then mapped out and the data appears perfectly fine in the <Employees /> component with each card populating within the <div className="cards">...</div> . Please see the following image as an example:
Employees Component, Employee Map Working
When I console.log(employee.id) within the test prop in Employee, I get the following log:
Console Log looking good!
When I go into Postman, the route works fine too!
HOWEVER, once I’m in the <Employee /> component, here are the code and the issues I receive:
import React from "react"
import { Link } from 'react-router-dom'
function Employee({
employee,
test
}) {
console.log(employee.id)
console.log(test)
const data = employee.skills
const listSkills = data.map((data) => <li key={data.skill_name}>{data.skill_name}</li>)
return (
<div className="card-spacing">
<div className="card">
<div className="card-details">
<ul className="cards-ul">
<li className="card-li">
<div>
<Link to={`/employees/${employee.id}`}></Link>
<div>
<h3>{employee.first_name} {employee.middle_name} {employee.last_name} {employee.suffix}</h3>
<p><>Role:</> <>{employee.job_title}</></p>
<p><>Contact Info:</><br/><>Phone: <><ul>{employee.emp_phone}</ul></></><>Email: </><ul>{employee.emp_email}</ul></p>
<p><>Address:</><br/><ul><>{employee.address.line_one}, {employee.address.line_two}</><br/><>{employee.address.zip.city}, {employee.address.zip.state} {employee.address.zip.zip_code}</></ul></p>
<p><>Gender: </>{employee.gender}</p>
<p><>SSN/Tax ID: </> ***-**-{employee.tax_number.slice(7, 11)}</p>
<p>Start Date: {employee.start_date}</p>
<p>Compensation: {employee.hourly_or_salary}</p>
<p>Hourly-Rate: ${employee.hourly_rate}</p>
<p>Annual-Salary: ${employee.annual_salary}</p>
<p>PTO Policy: <br/><ul><>{employee.pto_policy}</></ul></p>
<div>Skills: <br/><ul>{listSkills}</ul></div>
<p>Notes: <br/>{employee.emp_notes}</p>
<br/>
</div>
<div className="card-buttons">
<button>Edit</button>
<button>Expand/Collapse</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Employee
This data within the return () works perfectly when in [localhost:4000/hris/employees], but in this current situation, but I keep receiving the following error after console.logging my issue and checking the [localhost:4000/hris/employees/1] route:
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
and
The above error occurred in the <Employee> component:
I’m floored because I’ve done this a ton of times before and have never run into this before. The map should work fine.
I’ve tried doing the following to no avail:
employees.map(employee => (the “standard”)
employees.map(employeeMap =>
employees && employees.map(employee =>
employees && employees.map(employeeMap =>
employees?.map(employee =>
employees?.map(employeeMap =>
employees && employees?map(employee =>
employees && employees?map(employeeMap =>
Could anybody provide some context? Thanks!
