Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment …?

Here is my code:

return (
    <ThemeProvider theme={props.theme}>

        <section className={classes.loginForm}>
            {
            mode === "LOGIN"
            ?
            <LoginForm theme={props.theme} />
            <br/> <br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            :
            <SignUpForm theme={props.theme} />
            <br/><br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            }
        </section>

    </ThemeProvider>
);

The error appears at the first character of the opening tag for the breakline HTML element. I do not understand why this is happening as I have code elsewhere that uses the same principle and has no errors at all.

Answer

These elements, inside the curly braces, need to be wrapped inside of a <React.Fragment /> (<> and </> for short)

https://reactjs.org/docs/fragments.html

Your code:

 {
            mode === "LOGIN"
            ?
            <LoginForm theme={props.theme} />
            <br/> <br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            :
            <SignUpForm theme={props.theme} />
            <br/><br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
 }

Corrected code:

{
    mode === "LOGIN"
    ?
    <>
        <LoginForm theme={props.theme} />
        <br/> <br/>
        <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
            SIGNUP?
        </Button>
    </>
    :
    <>
        <SignUpForm theme={props.theme} />
        <br/><br/>
        <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
            SIGNUP?
        </Button>
    </>
}

Advertisement

Answer