React.js: CheckOut Time is not showing (Array not updating) - reactjs

Question

Actually, I am making Employee attendance portal. I have 2 buttons on the Dashboard named as CheckIn & CheckOut. When I click the CheckIn button I get the current date, attendance as 'PRESENT' & CheckIn time from the Backend & when I click the checkOut button I get CheckOut time from the Backend. I just wanted to display all of these data in a table on React. I am getting all the data from the backend but I am unable to show the checkOut time in a table. What I am doing is I have made an array UseState with the name checkIn and I am putting all the data in that array. But in my scenario, only CheckIn data is pushed in the CheckIn array, and CheckOut data is not pushed in CheckIn array. On the table, I have mapped on Checkin array data. Getting the chechIn data & checkOut column remains empty.
import React, { useState, useEffect } from "react";
import moment from "moment";
import EmployeeNavbar from "./EmployeeNavbar";
import { useDispatch, useSelector } from "react-redux";
import {
employeeCheckIn,
employeeCheckOut,
getEmployeeCheckIn,
getEmployeeCheckOut
} from "../../actions/employeeActions.js";
const EmployeePanel = () => {
const employee = useSelector(state => state.employee);
const dispatch = useDispatch();
const [checkIn, setCheckIn] = useState([]);
const handleCheckIn = id => {
dispatch(employeeCheckIn(id));
};
const handleCheckOut = id => {
dispatch(employeeCheckOut(id));
};
console.log(employee);
useEffect(() => {
dispatch(getEmployeeCheckIn());
dispatch(getEmployeeCheckOut());
{
employee.checkOut
? setCheckIn(employee.checkIn, employee.checkOut)
: setCheckIn(employee.checkIn);
}
console.log(checkIn);
});
return (
<div>
<EmployeeNavbar />
<div className="container">
<h4>
<b>Employee Attendance Portal</b>
</h4>
<div>
<button
className="btn-small waves-effect waves-light hoverable green"
onClick={() => handleCheckIn(employee.employee.employeeData._id)}
>
Check In
</button>
<button
className="btn-small waves-effect waves-light hoverable red accent-4"
onClick={() => handleCheckOut(employee.employee.employeeData._id)}
>
Check Out
</button>
</div>
<table className="striped centered">
<thead>
<tr>
<th>Date</th>
<th>Attendance</th>
<th>Check In</th>
<th>Check Out</th>
</tr>
</thead>
<tbody>
{checkIn
? checkIn.map((list, i) => {
return (
<tr key={i}>
<td>{moment(list.date).format("MMM Do YYYY")}</td>
<td>{list.attendance}</td>
<td>{list.checkIn}</td>
<td>{list.checkOut}</td>
</tr>
);
})
: ""}
</tbody>
</table>
</div>
</div>
);
};
export default EmployeePanel;

Answer 1

Hi in this line you are only showing checkin data
{checkIn
? checkIn.map((list, i) => {
return (
<tr key={i}>
<td>{moment(list.date).format("MMM Do YYYY")}</td>
<td>{list.attendance}</td>
<td>{list.checkIn}</td>
<td>{list.checkOut}</td>
</tr>
);
})
: ""}
you should merge both checkedIn and checkedOut data into single arry.then it will work