Why html tag doesn't render when there is condition?

Question

I have such code which renders my inputs:

                                        <Grid container spacing={2}>
                                            {
                                                changedSettings.map((setting) => (
                                                    setting.type !== 'input' || (setting.key === 'utm_value' && setting.type === 'input')
                                                        ? (
                                                            <Grid xs={12} md={6} item key={setting?.key}>
                                                                <SettingsField shouldUseUtm={values['should_use_utm']} inputData={setting} formikVal={values[setting?.key]} settings={changedSettings}/>
                                                            </Grid>
                                                        ) : null
                                                ))
                                            }
                                        </Grid>

But inside SettingsField I have such condition:

             field = (
                <>
                    <Field
                        className={classes.input}
                        name={key}
                        component={TextField}
                        type="number"
                        fullWidth
                        label={label}
                        inputProps={{
                            variant: "outlined"                      
                        }}
                        InputLabelProps={{
                            shrink: true
                        }}
                        variant="outlined"
                    />
                </>

//and then

    return (
        <>
            <Box>
                {field}
            </Box>

        </>
    );

** shouldUseUtm** changes from 0 to 1 and from 1 to 0, and when it's === 1, it should show my but in this case, it renders empty MaterialUi Grid

Also, if i put alert instead of div - it works fine

How to solve this problem?

Answer 1

Did you try with return ?

I mean, something like:

case 'input': 
        return (<>
            {shouldUseUtm === '1' || shouldUseUtm === 1
                ?
                   <div>fwqfqwf</div>
                 
                : null
            }
        </>)
            break;

Answer 2

A JSX block just generates a value. Values don't do anything in the middle of a switch statement.

You need to explicitly do something with the value (e.g. return it).