ReactJS – Props is Not Passed to Component

August 25, 2023

I created a project where a component shows a list of Employees.

MyEmployee component:

import { useState } from "react";

export default function MyEmployee({
  data = [],
  page = 1,
  size = 2,
  total = 0
}) {
  const [myEmployees, setMyEmployees] = useState(data);
  const [currPage, setCurrPage] = useState(page);
  const [rows, setRows] = useState(size);
  const [totalData, setTotalData] = useState(total);

  return (
    <>
      {console.log("data: ", data)}
      {console.log("myEmployees: ", myEmployees)}
      <h2>Some Employee</h2>
      {myEmployees.map((emp) => {
        console.log("iterate emp", emp);
        return (
          <div key={emp.id}>
            <span>{emp.name}</span>
            <span>{emp.email}</span>
          </div>
        );
      })}
      <button>{"<"}</button>
      <span>
        {currPage} of {Math.ceil(totalData / rows)}
      </span>
      <button>{">"}</button>
    </>
  );
}

then in App component I pass the props:

import { useEffect, useState } from "react";
import MyEmployee from "./MyEmployee";
import { getSomeData } from "./SomeService";

export default function App() {
  const [employees, setEmployees] = useState({});

  function getData() {
    const emp = getSomeData();
    console.log("emp: ", emp);
    if (emp?.status) {
      setEmployees(emp.data);
    }
    console.log("employees: ", employees);
  }

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="App">
      {console.log("employees: ", employees)}
      <MyEmployee
        data={employees?.someEmployeeData?.obj}
        page={employees?.someEmployeeData?.page}
        size={employees?.someEmployeeData?.size}
        total={employees?.someEmployeeData?.total}
      />
    </div>
  );
}

the props come from SomeService.js:

export function getSomeData() {
  return {
    status: true,
    message: null,
    data: {
      someEmployeeData: {
        page: 1,
        size: 2,
        total: 5,
        obj: [
          {
            id: 1,
            name: "Deas",
            email: "deas.north@somemail.com"
          },
          {
            id: 2,
            name: "Joey",
            email: "joey_ma2@somemail.com"
          }
        ]
      }
    }
  };
}

But i see that the props are not passed as the states in MyEmployee which initialized with the props have the deafult value. what did i miss / do wrong?

codesandbox

>Solution :

You are passing in the props but not setting the state inside the component, since you want them in different variables. Try adding useEffect in MyEmployee.js

const [myEmployees, setMyEmployees] = useState(data);
const [currPage, setCurrPage] = useState(page);
const [rows, setRows] = useState(size);
const [totalData, setTotalData] = useState(total);

useEffect(() => {
  setMyEmployees(data);
  setCurrPage(page);
  setRows(size);
  setTotalData(total);
}, [data, page, size, total]);


return (
  etc...