Conditional Rendering of Components with Same Props in ReactJS

Question

I have a simple conditional test that I am running to see which component to render. If the condition is true, I render one component, false the other component. Right now this is how my code looks something like this:

    {isPresent && (
        <FirstComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}
    {!isPresent && (
        <SecondComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}

What I want to know is whether or not I can make this code a bit DRYer. Something like this:

{isPresent && (
    <FirstComponent
        {propList}
    />
)}
{!isPresent && (
    <SecondComponent
        {propList}
    />
)}

Where propList represents all of the props that I want to include in each of these components.

Is this possible? If so, how?

Thanks.

how do you decide proplist value ? is already handled or you need to handle based on isPresent ? — Code Maniac
– Code Maniac, Commented Sep 15, 2019 at 16:21

Olivier Boissé · Accepted Answer · 2019-09-15 16:22:26Z

3

If both elements have the same properties, then you can store these properties into a constant and pass it to the target Component

function YourComponent(props) {
  const commonProps = {
      propOne: "value one",
      propTwo: "value two",
      ...props
   };

   const Component = isPresent ? FirstComponent : SecondComponent;
   return <Component {...commonProps}/>;
}

answered Sep 15, 2019 at 16:22

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moshe Over a year ago

Thanks - that did it.

Code Maniac · Accepted Answer · 2019-09-15 16:30:24Z

2

You can use a variable in render to define which component you want to render

 let Comp = isPresent ? FirstComponent : SecondComponent
 let propList = {
    propOne :"value one",
    propTwo : "value two",
    ...props
 }

Then in your return you can use

 <Comp
   { propList }
 />

Note:- Always name the variable with first letter capital if you're assigning it a component, because In JSX, lower-case tag names are considered to be HTML tags

edited Sep 15, 2019 at 16:30

answered Sep 15, 2019 at 16:22

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

1 Comment

Moshe Over a year ago

Thanks - much appreciated.

Collectives™ on Stack Overflow

Conditional Rendering of Components with Same Props in ReactJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related