Render multiple React components in shorthand if condition

Question

I'm trying to render multiple React components in a shorthand if, but it doesn't work as expected. This is my source:

  render() {

    const isLoggedin = true; 

    return (
      <div>
        { isLoggedin ? 
            <Greeting />
            <LogoutButton /> 
          : <LoginButton />
        }
      </div>
    );
  }

If I just use one component, it works (for example remove Greeting):

  render() {

    const isLoggedin = true; 

    return (
      <div>
        { isLoggedin ? 
            <LogoutButton /> 
          : <LoginButton />
        }
      </div>
    );
  }

Is there a way to render both of them?

What errors do you get? Try wrapping your components in a `
` in the example with multiple components. — Ionut Necula, Apr 03 '18 at 08:37

score 0 · Answer 1 · answered Apr 03 '18 at 08:36

0

You can use <div> </div> and put a code block there.

e.g.

<div>
<Greeting />
<LogoutButton /> 
</div>

answered Apr 03 '18 at 08:36

Murat Karagöz

35,401
16
78
107

score 0 · Answer 2 · answered Apr 03 '18 at 08:39

0

Try this :

render() {

  const isLoggedin = true; 

  return (
    <div>
      { isLoggedin ? (
          <Greeting />
          <LogoutButton />
        ) : (
          <LoginButton />
        )
      }
    </div>
  );
}

answered Apr 03 '18 at 08:39

GameTag

379
1
12

Render multiple React components in shorthand if condition

2 Answers2