Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

115
Views
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>
  </>
);
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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>
  </>
);
about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!