Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

116
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda