React: Are there respectable limits to number of props on react components

Question

At times I have components with a large amounts of properties.

Is there any inherent problem with this?

e.g.

render() {

  const { create, update, categories, locations, sectors, workTypes, organisation } = this.props; // eslint-disable-line no-shadow

  return (
    <div className="job-container">
      <JobForm
        organisationId={organisation.id}
        userId={user.id}
        action={action}
        create={create}
        update={update}
        categories={categories}
        locations={locations}
        sectors={sectors}
        workTypes={workTypes}
      />
    </div>
  );
} 

What are the best practices?

Answer 1

I think you have justly recognized a code smell. Anytime you have that many inputs(props) to a function(component), you have to question, how do you test this component with all the permutations of argument combinations. Using {...this.props} to pass them down only cuts down on the typing, sort of like spraying Febreeze over a dead decaying corpse.

I'd ask why you have both a create and update method vs a submit method?

How are you using theorganisationId and userId? If those are only needed to be passed to the create and update (or submit) methods that are also passed in, why not NOT pass them and let the onCreate/onUpdate handlers supply them?

Maybe JobForm should be rendered as:

<JobForm /* props go here */>
   <CategoryDroplist categories=this.props.categories />
   <LocationDroplist locations=this.props.locations />
</JobForm>

Within JobForm you have props.children but those are separate components that might be fine as separate components.

I just don't have enough information to answer the question, but by breaking your components into simpler things, the number of props go down and the smell decreases as well.