CODEWITHSUNDEEP
javascriptreactjsreact-props
cts
cts

Reputation: 1084

Pass same Props to multiple React component

I'm currently rendering two different components based on the value of shouldRenderPlanA - however, despite different components 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>
  </>
);

Upvotes: 3

Views: 7324

Answers (3)

Newbie
Newbie

Reputation: 4849

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

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 commonly 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 component 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 becomed an arrow function with a complete block. From (opt) => (first_instruction) to (opt) => { first_instruction; return (second_instruction); }. This allows us to add code before rendering at each map() cycle.

Upvotes: 8

lawrence-witt
lawrence-witt

Reputation: 9364

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

Combining and then spreading the props from an object may also be beneficial, depending on where those props come 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>
  </>
);

Upvotes: 2

Vikram Patil
Vikram Patil

Reputation: 162

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.

Upvotes: 0

Related Questions