I'm currently rendering two different ponents based on the value of shouldRenderPlanA - however, despite different ponents being rendered (depending on the value) - I pass both the same props. How can I condense this to reduce repeated code?

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

I'm currently rendering two different ponents based on the value of shouldRenderPlanA - however, despite different ponents being rendered (depending on the value) - I pass both the same props. How can I condense this to reduce repeated code?

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

• javascript
• reactjs
• react-props

• Do you want to reduce repeated code where you have repeated props? – ksav Commented Sep 29, 2021 at 10:29

3 Answers 3

To pass same Props to multiple React ponent or to pass multiple Props to a React ponent, you can use Object unpacking/destruction within ponents.

function Component() {
  const propPack = {
    variousProps1: variousProps1,
    variousProps2: variousProps2,
    variousProps3: variousProps3,
  };

  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => (
          shouldRenderPlanA
            ? <StyledLabelOptionOne {...propPack} />
            : <StyledLabelOptionTwo {...propPack} />
        ))}
      </StyledRow>
    </>
  );
}

This is monly used to pass all the parent props down to children

function Component(props) {
  return (
    condition
      ? <StyledLabelOptionOne {...props} />
      : <StyledLabelOptionTwo {...props} />
  )
}

You can also conditionally pick the ponent for rendering (but this IMHO is less readable)

function Component() {
  const PickedComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo;
  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => (
          <PickedComponent
            variousProps1={variousProps1}
            variousProps2={variousProps2}
            variousProps3={variousProps3}
          />
        ))}
      </StyledRow>
    </>
  );
}

For conditions/props derived from within .map() simply move the code within the map callback

function Component() {
  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => {
          const propPack = {
            variousProps1: variousProps1,
            variousProps2: opt.value,
          };
          const PickedComponent = opt.condition ? StyledLabelOptionOne : StyledLabelOptionTwo;
          return (
            shouldRenderPlanA
              ? <StyledLabelOptionOne {...propPack} />
              : <StyledLabelOptionTwo {...propPack} />
          )
        })}
      </StyledRow>
    </>
  );
}

Note how arrow function within map has beed an arrow function with a plete block. From (opt) => (first_instruction) to (opt) => { first_instruction; return (second_instruction); }. This allows us to add code before rendering at each map() cycle.

You could assign both options to a variable which contains a union of both ponent types.

Combining and then spreading the props from an object may also be beneficial, depending on where those props e from. If they are taken from opt inside the map then this second step is probably not required:

const LabelComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo;

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        <LabelComponent
          prop1={opt.prop1}
          prop2={opt.prop2}
        />
      ))}
    </StyledRow>
  </>
);

You could use the React Context API. This would enable you to share the props across multiple children without passing it to each one of them explicitly.