-1

I am new in React and a little bit confused regarding to reusable components. I create my pages e.g. Employee in a pages folder and keep Material UI components e.g. Datatable in the components folders.

Normally I would copy Datatable to my pages folder as EmployeDatatable and customize it based on the columns for employees and fetch data in this EmployeDatatable.

On the other hand, in order to prevent code repeat and managing components easily, I am also thinking to call the same Datatable for different pages e.g. Employee, Salary by passing the parameters like columns, data urls,...

For example, when I am on the list page, I can call Datatable by passing all the necessary parameters:

const EmployeeList = () => {
  return (
    <div className="list">
      <Sidebar/>
      <div className="listContainer">
        <Navbar/>
        <Datatable/>
      </div>
    </div>
  )
}

export default EmployeeList

But I am not sure if it is a proper approach and makes something much complicated. Ok, maybe at the beginning it may not be good idea, but I would be happy if you share your ideas based on what should be for a proper implementation (I have developed several React apps and where I created seperated Datatables instead of reusable and now I can start to build reusable components if needed).

Could you pls clarify me how should I build? my components for this scenario?

Here is Datatable part below if it is needed to have a look at:

const Datatable = () => {
  const [data, setData] = useState(userRows);

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };

  return (
    <div className="datatable">
     // ...
    </div>
  );
};

export default Datatable;
Jack
  • 1
  • 21
  • 118
  • 236
  • I just need your advice to follow proper approaches. Any idea would be appreciated. – Jack Mar 06 '23 at 08:28

2 Answers2

1

you should not copy and edit your component. Reusable components are one of the advatanges using react actually, and its such a good practice.

1997daly
  • 31
  • 4
  • Then, do you mean that I should use the same datatable by passing app the specific data e.g. column names, data, callback methods for (Add/Edit/Update), etc? – Jack Mar 06 '23 at 09:30
  • If so, could you post an example please? SHould I pass via props? How? – Jack Mar 06 '23 at 09:30
1

this how to pass props in React :


const EmployeeList = () => {
  const [state,setState]=useState("")
  
const callback = useCallback(()=>{
 //...your callback logic goes here
},[])     

  return (
    <div className="list">
      <Sidebar/>
      <div className="listContainer">
        <Navbar/>
        <Datatable
   state={state} 
   setState={setState}
   callback ={callback}
/>
      </div>
    </div>
  )
}

export default EmployeeList

and in your datatable component you get your props like this


const Datatable = ({state,setState,callback}) => {
  const [data, setData] = useState(userRows);

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };

  return (
    <div className="datatable">
     // ...
    </div>
  );
};

export default Datatable;

note that if your are using typescript , you need to type your props in datatable.

see https://beta.reactjs.org/learn/passing-props-to-a-component for more details

1997daly
  • 31
  • 4
  • **1.** Should I also pass actions buttons, etc from list to datable component? If so, do you have an idea how to call the methods in the list component from datable? – Jack Mar 06 '23 at 10:41
  • **2.** Do you have an idea for the name of this reusable component folder? I thought `custom` or `common`, but maybe there is better options. Any idea? – Jack Mar 06 '23 at 10:42
  • can you please provide and example of what do you mean by action buttons , you can simply create a components folder in the scr folder of your project – 1997daly Mar 06 '23 at 11:29
  • Thanks, what about this? Do you have any suggestion? >>> https://stackoverflow.com/questions/75650388/passing-data-via-route-between-2-components-in-react – Jack Mar 06 '23 at 11:37