React js | Conditional rendering

user_3103101 0
Viewed 117

I have a problem with conditional rendering in reactjs.

Problem

If an environment is prod, then <Sentry.ErrorBoundary> tag should be loaded.

Is there a better way instead of using if with sentrytag and else without sentrytag?

Code:
ReactDOM.render(
    <Provider store={store}>
        {environment == 'PROD' && <Sentry.ErrorBoundary> }
            <Experiment>
                <Root />
            </Experiment>
            {environment == 'PROD' && </Sentry.ErrorBoundary> }
    </Provider>, document.getElementById('root'));
reactjs if-statement render javascript
1 Answers

Is there a better way instead of using if with sentrytag and else without sentrytag

Yea you could define a variable with the 'wrapper' element, or an 'empty' React.Fragment if the element isn't needed:

const wrapper = (environment === 'PROD') ? Sentry.ErrorBoundary : React.Fragment;

<Provider store={store}>
    <wrapper>
        <Experiment>
            <Root />
        </Experiment>
    </wrapper>
</Provider>

Small working demo, just to give the idea.

The Error component is the Sentry.ErrorBoundary in OP's example.

Press the button to toggle the 'error' state to enable/disable the wrapper.

const Error = (props) => (
    <div>
        <h1>{'Omg; error!'}</h1>
        {props.children}
    </div>
);

const Example = () => {

    const [ err, setErr ] = React.useState(true);
    const Wrapper = (err) ? Error : React.Fragment;
    
    return (
        <div>
            <Wrapper>
                Hello!
            </Wrapper>
            <br /><br /><br />
            <button onClick={() => setErr(!err)}>Toggle</button>
        </div>
    )
}

ReactDOM.render(<Example />, document.getElementById("app"));
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="app"></div>

user_56255470
Related