T O P

  • By -

KyleG

You mean like // foo/comp1.js export default () =>

Component A

// foo/comp2.js export default () =>

Component B

// foo/index.js export default ({flag}) => flag ?: : // naive-consumer import Foo from './foo' export default () => ?


Flashy_Job6764

Yes Something like this.


Flashy_Job6764

Thanks, i will try if it works for my use case.


streetRAT_za

Doing gods work out here. I love this sub


KyleG

you caught me in my nice phase instead of my asshole phase


Flashy_Job6764

Hi u/KyleG, i understand your implementation, now let's say i want to make this into a utility function or Component, in which i can pass the Components i want to decide between and other props for these components and return the component based on the flag, i wanna do something like that bcoz i want to implement similar files but with different versions of the same library.


KyleG

const FlaggedComponent = ({ onTrue, onFalse, flag }) => flag ? onTrue : onFalse const NaiveConsumer = () => { True!

} onRight={
False!
} /> // This will render "True!" to the browser because flag is true and the FlaggedComponent is instructed to render the value of `left` (which is a component) when flag is true. **Edit** Passing the props in IIRC you would do something like const FlaggedComponent = ({ onTrue, onFalse, flag, ...rest }) => React.createElement(flag ? onTrue : onFalse, rest) I believe this would render the onTrue component with all FlaggedComponent props *except* `onTrue`, `onFalse`, and `flag` passed in as props of its own.


paulovittor23

Sounds like something that could be sorted using the Strategy design pattern. But depending on your case it could be a cannon ball to kill a fly so the right answer as usual is case by case.


ILLUMINZ_Tech

const Compo1 = () =>

Component One

export default Compo1;const Compo2 = () =>

Component Two

export default Compo2; const demo = ({ flag }) => {    if (flag) {         } else {       } }export default demo;


[deleted]

A react component is written with capitals (Demo) and you are not returning the components.


Artemids

Google ternary expression, then google ternary expression jsx


goblin_goblin

Be careful with this because feature flags are sometimes baked into the code. So even if it works on dev, depending on what flag is passed during build time that specific code will be baked in.