javascript - How to simplify overriding props in React?

Question

I have an If statement and returning the same component with the extra props based on the state. Any idea how to simplify this? Can I use recursion? Any idea?

iconRight is only difference.

renderInput = () => {
    if (isLoading) {
      return (
        <Input
          iconRight={(
              <Spinner />
          )}
          autoComplete="off"
          id="unique-id-2"
          aria-autocomplete="both"
        />
      );
    }
    return (
      <Input
        autoComplete="off"
        id="unique-id-2"
        aria-autocomplete="both"
      />
    );
  }
}

question from:https://stackoverflow.com/questions/65601628/how-to-simplify-overriding-props-in-react

Answer 1

You can spread props onto the component:

renderInput = () => {
    const props = {
        autoComplete: 'off',
        id: 'unique-id-2',
        'aria-autocomplete': 'off'
    };
    if (isLoading) {
      return (
        <Input
          iconRight={(
              <Spinner />
          )}
          {...props}
        />
      );
    }
    return (
      <Input {...props} />
    );
  }
}

But i'd suggest changing your Input component to accept a loading prop and let the Input component handle that logic. It'll make your consuming code a lot easier to read also.