Trying to think an approach for creating a feature flag in React

I'm trying to create a feature flag in my react project (I believe I have to add a feature flag in the appsettings.json file), the flag is to hide the features that are currently being developed as we don't want users to have those features when those are yet to be tested fully. So the current approach I have is to wrap the newly developed code with a condition like if(flag){new code} I'm sorry if the approach looks silly but that's all I can come up with as a rookie, so can you guys help with some feasible approach if possible?

So I've tried adding the if condition to an existing feature in the code base as the newly developed code is yet to be committed but it didn't work.

Based on your comment from three hours ago I was able to figure out what exactly you wanted to do.

So: already having the flag all there is to do is to use it. There are at least three ways you can do it:

1. make it hidden - i think MDN docs explain it well enough
2. make it transparent - this is what you did: setting opacity to 0
3. not render it at all

not rendering is achieved like this:

return (    
  <SomeParentComponent>
    {EnableDivision &&
      <Division/>
    }
  </SomeParentComponent>
)

It's not like one of them is better than others: they are all situational.

1. hidden element is rendered, and therefore has state and can be found in the DOM tree, but doesn't take any space
2. transparent is like hidden, but takes up space
3. not rendered on the other hand can't be found in the DOM tree, doesn't take any space, the funcion or class creating it is never run and therefore it also can't have any state

Hopefully this should dispel your doubts about how to do it.

Also if you ever needed use some flags in many different components in various places of your component tree take look at what React Context does.