javascript - best way to Pass Multiple Props In React js

Question

passing react Props as mentioned in the image, I want to know is that any cleaner way to pass the multiple props in React.

question from:https://stackoverflow.com/questions/65931823/best-way-to-pass-multiple-props-in-react-js

Answer 1

According to react eslint rules it is not recommended to use props spreading for readability and maintenance reasons, Read more about the rule here

So what you can do is either leaving it as it is or group similar props into one object and pass it for example:

const entity = { getEntity, entityKeyAccess, setEntityKeyAccess };
const display = { display, setDisplay };
const child = { childKeyAccess, setChildKeyAccess };
// And so on you get the idea I guess.

<PanelEntity panelData={panelData} entity={entity} display={display} child={child} />;

This way now anyone using this component will be able to understand your props easily (of course don't forget to document your props) and you decluttered the component without using props spreading.