React, how to make the component name used dynamic?

Question

In React, I have a wrapper that populates the isScrolled --- When the page loads isScrolled is false, when the user scrolls, isScrolled is equal to true.

In one of my React components, I have have the following:

    <Button.Secondary
      size="S"
      onClick={() => {
       // lots of stuff here
      }}
    >
      {!isLoggedIn ? 'XXXXX' : 'YYYY'}
    </Button.Secondary>

The challenge I'm having is when isScrolled is false, I want the above Button.Secondary - When isScrolled is true, I want:

    <Button.Secondary
      size="S"
      onClick={() => {
       // lots of stuff here
      }}
    >
      {!isLoggedIn ? 'XXXXX' : 'YYYY'}
    </Button.Secondary>

How can I make the Button._____ dynamic based on the isScrolled property?

Adam Jenkins · Accepted Answer · 2020-02-13T22:34:56.430

2

Pretend your Button that you import is just an object that looks like this:

const Button = {
    Primary: () => return some jsx
    Secondary: () => return some jsx
}

So if you want to render the secondary button you can do:

  <Button.Secondary>

  // or
  const Cmp = Button.Secondary;
  return <Cmp/>

  // or
  const Cmp = Button['Secondary'];
  return <Cmp/>

extrapolating:


import { Button } from 'somewhere'


const YourCmp = ({isScrolled}) => {

   const Cmp = Button[isScrolled ? 'Secondary' : 'Primary'];
   return <Cmp {...yourProps}><SomeChild/></Cmp>

}

edited Feb 13 '20 at 22:34

answered Feb 13 '20 at 22:29

Adam Jenkins

51,445
11
72
100

This way is a correct way but it is not readable enough. – AmerllicA Feb 13 '20 at 22:52
1

@AmerllicA you don't have to write this exact code, you can write it however you choose to. The only point of this was to illustrate "how" to render a component dynamically - interesting a correct answer got downvoted. – Adam Jenkins Feb 13 '20 at 22:54
1

Dear @Adam, Exactly you right, I just offer a better way, just like I said your code works well but it is not readable enough. just it. thanks for your comment bro. – AmerllicA Feb 13 '20 at 22:56

score 1 · Answer 2 · answered Feb 13 '20 at 22:50

1

For such cases, the below way is a way to handle this situation:

~~~
const { isScrolled } = this.state;

const Btn = isScrolled ? Button.Secondary : Button.Primary;

~~~

<Btn
  size="S"
  onClick={() => {
    // lots of stuff here
  }}
>
  {!isLoggedIn ? 'XXXXX' : 'YYYY'}
</Btn>

answered Feb 13 '20 at 22:50

AmerllicA

29,059
15
130
154

1

Dear @Adam Bro, I used this way on my project, It is more readable. just it. both answers work well. But when code can be simple and understandable why not we obey it? – AmerllicA Feb 13 '20 at 22:59

score 1 · Answer 3 · answered Feb 13 '20 at 22:51

you can build an object with a helper function or pass it in as props

then dynamically render it however you want.

so ex:

import all your potential buttons 

get someLogicRelatedToScrollPosition(){
 ... take scroll position and return the name of key you want from the incoming prop

}

render(){
.... some code

/** this object might look like 
 *{
 * initial: Button.Primary,
 * scrolled: Button.Secondary,
 * someOtherScrollPosition: Button.Whatever
 * 
 *  *}
 */
const {myButtonsComponents} = this.props;
const CurrentButtonComponent = myButtonsComponents[this.someLogicRelatedToScrollPosition]


return (
  ..jsx
<CurrentButtonComponent {...props} />
)}

React, how to make the component name used dynamic?

3 Answers3