Which ReactJS Higher Order Component(HOC) Would You Vote For And Which Went Out Of Line

HOC isn’t part of the ReactJS library, it is a style of writing your ReactJS so that you don’t re-peat the process of creating similar component logic.
So I am about to learn to use ReactRedux Library and I have learnt it makes heavy use of the HOC pattern, just got a single example of what the HOC is about and I written four scenario code for myself to know if am on the right track or understand quite a bit of the concept.
I need to know which one you would rather vote for among these scenarios

SCENERIO ONE

import React from ‘react’;
import ReactDOM from ‘react-dom’;

const ServiceBoy1 = (props) => (

<div>
<h2>{props.msg1}</h2>
<button onClick={((e) => alert(props.order_response))}>Subscribe</button>

</div>
)

const ServiceBoy2 = (props) => (
<div>
<h2>{props.msg2}</h2>
<button onClick={((e) => alert(props.order_response))}>Subscribe</button>

</div>
)

const ServiceBoy3 = (props) => (
<div>
<h2>{props.msg3}</h2>
<button onClick={((e) => alert(props.order_response))}>Subscribe</button>
</div>

)

//create a HOC to handle component switching
const handleSwitching = (Component1, Component2, Component3) => {
return (props) => (
<div>
{props.isNoon && <Component1 {…props} />}
{props.isNoon === false && <Component2 {…props} />}
{props.hasCash && <Component3 {…props} />}

</div>
)
}

const ServiceHOC = handleSwitching(ServiceBoy1, ServiceBoy2, ServiceBoy3);

ReactDOM.render(<ServiceHOC isNoon={false} hasCash={false} msg1=”Welcome to Expense System” msg2=”My name is S1 i will serve you” msg3=”My name is S3 I am the one to Serve you” order_response =”You have subscribed successfully” />, document.getElementById(‘root’));

SCENERIO 2

import React from ‘react’;
import ReactDOM from ‘react-dom’;

const IgboPlatform = (props) => (
<div>
<h2>{props.hello}</h2>
<h2>{props.message}</h2>
<button onClick={props.translate}>Translate Message</button>
</div>
)
//DO SAME ABOVE FOR YORUBA, HAUSA — YorubaPlatform, HausaPlatform…

const PlatformHOC = (EmbededComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = ({ message: ‘Good Morning’, language_type: this.props.language_type })

this.handleTranslate = this.handleTranslate.bind(this);
}

handleTranslate() {
if (this.state.language_type === ‘yoruba’) {
this.setState({
message: “Eka ro”,
})
}

if (this.state.language_type === ‘igbo’) {
this.setState({
message: “Isala Chi”,
})
}

if (this.state.language_type === ‘hausa’) {
this.setState({
message: “Sa nu De zu a”,
})
}

}

render() {
return (

<EmbededComponent message={this.state.message} translate={this.handleTranslate} {…this.props} />
)
}
}
}

const IgboPage = PlatformHOC(IgboPlatform)

//you can have
const YorubaPage = PlatformHOC(YorubaPlatform)

//HERE HOC DEFINING THE LOGIC FOR COMPONENTS THAT SHARE THE SAME LOGIC AND STILL //CAN DO ITS OWN THING

ReactDOM.render(<IgboPage language_type=”igbo” />, document.getElementById(‘root’));

SCENERIO 3

import React from ‘react’;
import ReactDOM from ‘react-dom’;

const IgboPlatform = (props) => (
<div>
<h2>{props.welcome}</h2>
<h4>The Yoruba’s will say- {props.yoruba_welcome}</h4>

</div>
)

const YorubaPlatform = (props) => (
<div>
<h2>{props.welcome}</h2>
</div>
)

const HausaPlatform = (props) => (
<div>
<h2>{props.welcome}</h2>

</div>
)

const LanguageHOC = (Platform1, Platform2, Platform3) => {

return (props) => (
<div>
{props.language_type === ‘igbo’ && <Platform1 welcome={props.igbo_welcome} {…props} />}

{props.language_type === ‘yoruba’ && <Platform2 welcome={props.yoruba_welcome} {…props} />}

{props.language_type === ‘hausa’ && <Platform3 welcome={props.hausa_welcome} {…props} />}

</div>
)
}

const LanguageSwitcher = LanguageHOC(IgboPlatform, YorubaPlatform, HausaPlatform)

ReactDOM.render(<LanguageSwitcher language_type=”igbo” igbo_welcome=”Umu Nnem Ke du ni” yoruba_welcome=”Ba Wo ni Awon Omo ni Ile” hausa_welcome=”Sa Nu De Zu Wa” />, document.getElementById(‘root’));

SCENERIO 4

import React from ‘react’;
import ReactDOM from ‘react-dom’;

const IgboPlatform = (props) => (
<div>
<h1>{props.trademark}</h1>
<h2>{props.message}</h2>
<ul>
<li>
<button onClick={props.changeToYoruba}>Yoruba</button>
</li>
<li>
<button onClick={props.changeToHausa}>Hausa</button>
</li>
</ul>

</div>
)

const YorubaPlatform = (props) => (
<div>
<h1>props.trademark</h1>
<h2>{props.message}</h2>
<ul>
<li>
<button onClick={props.changeToIgbo}>Igbo</button>
</li>
<li>
<button onClick={props.changeToHausa}>Hausa</button>
</li>
</ul>

</div>
)

const HausaPlatform = (props) => (
<div>
<h1>props.trademark</h1>
<h2>{props.message}</h2>
<ul>
<li>
<button onClick={props.changeToYoruba}>Yoruba</button>
</li>
<li>
<button onClick={props.changeToIgbo}>Igbo</button>
</li>
</ul>

</div>
)

const HOCPlatform = (Platform1, Platform2, Platform3) => {
return class extends React.Component {
constructor(props) {
super(props);

this.state = ({ language_type: ‘igbo’, message: ‘How are you family?’ })
this.changeToHausa = this.changeToHausa.bind(this)
this.changeToIgbo = this.changeToIgbo.bind(this)
this.changeToYoruba = this.changeToYoruba.bind(this)
}

changeToHausa() {
this.setState = () => ({
message: “Sa nu De Zu Wa”,
language_type: “hausa”
})
}

changeToIgbo() {
this.setState = () => ({
message: “Umu Nwa nne Ke du Ka Odi”,
language_type: “igbo”
})
}

changeToYoruba() {
this.setState = () => ({
message: “Ba wo ni omo Ni Ile”,
language_type: “yoruba”
})
}

render() {
var platform

if (this.state.language_type === ‘igbo’) {
platform = <Platform1 message={this.state.message} changeToHausa={this.handleHausa} changeToYoruba={this.handleYoruba} {…this.props} />
}

if (this.state.language_type === ‘yoruba’) {
platform = <Platform2 message={this.state.message} changeToIgbo={this.handleIgbo} changeToHausa={this.handleHausa} {…this.props} />
}

if (this.state.language_type === ‘hausa’) {
platform = <Platform3 message={this.state.message} changeToIgbo={this.handleIgbo} changeToYoruba={this.handleYoruba} {…this.props} />
}

return (
<div>
{platform}
</div>
)
}
}
}

const LangSwitch = HOCPlatform(IgboPlatform, YorubaPlatform, HausaPlatform)

ReactDOM.render(<LangSwitch trademark=”Welcome to React HOC” />, document.getElementById(‘root’));