Styjun

Should I use the words "pyromancy" and "necromancy" even if they don't mean what people think they do?

Did ancient peoples ever hide their treasure behind puzzles?

Create a list of snaking numbers under 50,000

How to determine the convexity of my problem and categorize it?

Don't look at what I did there

Was a six-engine 747 ever seriously considered by Boeing?

What is the purpose of Strength, Intelligence and Dexterity in Path of Exile?

Normalized Malbolge to Malbolge translator

Do manacles provide any sort of in-game mechanical effect or condition?

Moscow SVO airport, how to avoid scam taxis without pre-booking?

How can I throw a body?

What caused the end of cybernetic implants?

How to differentiate between two people with the same name in a story?

Scaling arrows.meta with tranform shape

What is the practical impact of using System.Random which is not cryptographically random?

Why do presidential pardons exist in a country having a clear separation of powers?

How do I portray irrational anger in first person?

Printing a list as "a, b, c." using Python

Why is there not a willingness from the world to step in between Pakistan and India?

Count the number of triangles

Inspiration for failed idea?

Group riding etiquette

Why is there no Disney logo in MCU movies?

How to investigate an unknown 1.5GB file named "sudo" in my Linux home directory?

React HOC with multiple components

How can I select an element with multiple classes in jQuery?Loop inside React JSXreact-router - pass props to handler componentReact js onClick can't pass value to methodCan you force a React component to rerender without calling setState?What do these three dots in React do?Programmatically navigate using react routerHow to conditionally add attributes to React components?What is the difference between React Native and React?react-draft-wysiwyg - render saved content to update

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

0

I want to create a React HOC that would ideally receive two components instead of one wrapped component and toggle between them. That is, in the code below, instead of <h3>component one</h3> and <h3>component two<h3>, they would each represent child components. How would I be able to accomplish this? Some psuedo code for how I would write this HOC:

<HOC>
 <ComponentOne />
 <ComponentTwo />
</HOC>

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

hoc(componentOne, componentTwo)

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

javascript reactjs

share|improve this question

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

add a comment | 

1

0

I want to create a React HOC that would ideally receive two components instead of one wrapped component and toggle between them. That is, in the code below, instead of <h3>component one</h3> and <h3>component two<h3>, they would each represent child components. How would I be able to accomplish this? Some psuedo code for how I would write this HOC:

<HOC>
 <ComponentOne />
 <ComponentTwo />
</HOC>

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

hoc(componentOne, componentTwo)

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

javascript reactjs

share|improve this question

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

add a comment | 

I want to create a React HOC that would ideally receive two components instead of one wrapped component and toggle between them. That is, in the code below, instead of <h3>component one</h3> and <h3>component two<h3>, they would each represent child components. How would I be able to accomplish this? Some psuedo code for how I would write this HOC:

<HOC>
 <ComponentOne />
 <ComponentTwo />
</HOC>

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

hoc(componentOne, componentTwo)

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

javascript reactjs

share|improve this question

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

<HOC>
 <ComponentOne />
 <ComponentTwo />
</HOC>

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

hoc(componentOne, componentTwo)

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

class HOC extends React.Component 
 constructor() 
 super();
 this.state = 
 onClick: false,
 ;
 this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 this.setState(onClick: !this.state.onClick);
 
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 <h3>component one</h3> :
 <h3>component two</h3>
 
 </div>
 );
 




ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

share|improve this question

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

share|improve this question

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

asked Mar 27 at 21:32

JimmyJimmy

32844 silver badges1919 bronze badges

2 Answers
2

active

oldest

votes

1

If a component has more than one child then this.props.children will be an array.

class HOC extends React.Component 

 // ... rest of code ....

 render() 
 const onClick = this.state;
 const children = this.props;

 return !onClick ? children[0] : children[1];
 

Then use it like so:

<HOC>
 <div>Child One</div> 
 <div>Child Two</div>
</HOC>

Obviously this will only work with two children but you could extend it by passing an integer to <HOC> through props to tell it what child to select.

Edit

After a quick look at the docs this is a better version of what I wrote above as this.props.children is not an array, it is an opaque data structure:

class HOC extends React.Component 

 // ... rest of code ...

 render() 
 const onClick = this.state;
 const children = React.Children.toArray(this.props.children);

 return !onClick ? children[0] : children[1];
 

share|improve this answer

edited Mar 29 at 14:37

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

add a comment | 

3

I am not sure if I understood you. Why do you need it to be HOC?

If you would pass components as props like that:

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

Then you would be able to access them using props.

render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 this.props.componentOne :
 this.props.componentTwo
 
 </div>
 );
 

share|improve this answer

edited Mar 27 at 21:44

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, essentially this. I am just wondering, is this the most elegant way to pass and handle multiple components in another component? Obviously with React HOC and this.props.children there are ways of rendering child props / components, but you aren't really able to use those tools when having to logically handle multiple child components.
  
  – Jimmy
  Mar 27 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a bit confused... would you like to pass more then two components?
  
  – Alexandr Zavalii
  Mar 27 at 22:06
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55386780%2freact-hoc-with-multiple-components%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

If a component has more than one child then this.props.children will be an array.

class HOC extends React.Component 

 // ... rest of code ....

 render() 
 const onClick = this.state;
 const children = this.props;

 return !onClick ? children[0] : children[1];
 

Then use it like so:

<HOC>
 <div>Child One</div> 
 <div>Child Two</div>
</HOC>

Obviously this will only work with two children but you could extend it by passing an integer to <HOC> through props to tell it what child to select.

Edit

After a quick look at the docs this is a better version of what I wrote above as this.props.children is not an array, it is an opaque data structure:

class HOC extends React.Component 

 // ... rest of code ...

 render() 
 const onClick = this.state;
 const children = React.Children.toArray(this.props.children);

 return !onClick ? children[0] : children[1];
 

share|improve this answer

edited Mar 29 at 14:37

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

add a comment | 

1

If a component has more than one child then this.props.children will be an array.

class HOC extends React.Component 

 // ... rest of code ....

 render() 
 const onClick = this.state;
 const children = this.props;

 return !onClick ? children[0] : children[1];
 

Then use it like so:

<HOC>
 <div>Child One</div> 
 <div>Child Two</div>
</HOC>

Obviously this will only work with two children but you could extend it by passing an integer to <HOC> through props to tell it what child to select.

Edit

After a quick look at the docs this is a better version of what I wrote above as this.props.children is not an array, it is an opaque data structure:

class HOC extends React.Component 

 // ... rest of code ...

 render() 
 const onClick = this.state;
 const children = React.Children.toArray(this.props.children);

 return !onClick ? children[0] : children[1];
 

share|improve this answer

edited Mar 29 at 14:37

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

add a comment | 

If a component has more than one child then this.props.children will be an array.

class HOC extends React.Component 

 // ... rest of code ....

 render() 
 const onClick = this.state;
 const children = this.props;

 return !onClick ? children[0] : children[1];
 

Then use it like so:

<HOC>
 <div>Child One</div> 
 <div>Child Two</div>
</HOC>

Obviously this will only work with two children but you could extend it by passing an integer to <HOC> through props to tell it what child to select.

Edit

After a quick look at the docs this is a better version of what I wrote above as this.props.children is not an array, it is an opaque data structure:

class HOC extends React.Component 

 // ... rest of code ...

 render() 
 const onClick = this.state;
 const children = React.Children.toArray(this.props.children);

 return !onClick ? children[0] : children[1];
 

share|improve this answer

edited Mar 29 at 14:37

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

class HOC extends React.Component 

 // ... rest of code ....

 render() 
 const onClick = this.state;
 const children = this.props;

 return !onClick ? children[0] : children[1];
 

<HOC>
 <div>Child One</div> 
 <div>Child Two</div>
</HOC>

class HOC extends React.Component 

 // ... rest of code ...

 render() 
 const onClick = this.state;
 const children = React.Children.toArray(this.props.children);

 return !onClick ? children[0] : children[1];
 

share|improve this answer

edited Mar 29 at 14:37

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

answered Mar 27 at 21:55

Jamie WilliamsJamie Williams

17011 silver badge99 bronze badges

3

I am not sure if I understood you. Why do you need it to be HOC?

If you would pass components as props like that:

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

Then you would be able to access them using props.

render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 this.props.componentOne :
 this.props.componentTwo
 
 </div>
 );
 

share|improve this answer

edited Mar 27 at 21:44

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, essentially this. I am just wondering, is this the most elegant way to pass and handle multiple components in another component? Obviously with React HOC and this.props.children there are ways of rendering child props / components, but you aren't really able to use those tools when having to logically handle multiple child components.
  
  – Jimmy
  Mar 27 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a bit confused... would you like to pass more then two components?
  
  – Alexandr Zavalii
  Mar 27 at 22:06
  

  
  
  
  

add a comment | 

3

I am not sure if I understood you. Why do you need it to be HOC?

If you would pass components as props like that:

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

Then you would be able to access them using props.

render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 this.props.componentOne :
 this.props.componentTwo
 
 </div>
 );
 

share|improve this answer

edited Mar 27 at 21:44

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, essentially this. I am just wondering, is this the most elegant way to pass and handle multiple components in another component? Obviously with React HOC and this.props.children there are ways of rendering child props / components, but you aren't really able to use those tools when having to logically handle multiple child components.
  
  – Jimmy
  Mar 27 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  a bit confused... would you like to pass more then two components?
  
  – Alexandr Zavalii
  Mar 27 at 22:06
  

  
  
  
  

add a comment | 

I am not sure if I understood you. Why do you need it to be HOC?

If you would pass components as props like that:

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

Then you would be able to access them using props.

render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 this.props.componentOne :
 this.props.componentTwo
 
 </div>
 );
 

share|improve this answer

edited Mar 27 at 21:44

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

<HOC
 componentOne=<ComponentOne />
 componentTwo=<ComponentTwo />
/>

render() 
 return (
 <div>
 <button onClick=this.handleClick>Click Me!</button>
 
 this.state.onClick ?
 this.props.componentOne :
 this.props.componentTwo
 
 </div>
 );
 

share|improve this answer

edited Mar 27 at 21:44

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges

answered Mar 27 at 21:38

Alexandr ZavaliiAlexandr Zavalii

1,07011 gold badge99 silver badges2626 bronze badges