How to show multiple components in reactjs

Question

I have written a simple application using react native for android. i want to know how do i use more than one component adjacent to each other in the return function. If I put a toolbar tag, it gives an error.

return (
<MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
/>
);

Above works. Below one gives error

return (
<Toolbar/>
<MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
/>
);

Please help.

Sharan Kashyap · Accepted Answer · 2016-01-23 20:06:13Z

4

Enclose it in a View tag if you think that's how you want to showcase it.

return (
  <View style={{flex: 1}}>
    <Toolbar />
    <MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
    />
  </View>
);

This should work.

answered Jan 23, 2016 at 20:06

Sharan Kashyap

1087 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niharika Neeraj · Accepted Answer · 2016-01-23 20:09:40Z

3

You cannot return 2 values remember? You can only return one encapsulated tag. So, wrap a view. It will work :)

return (
  <View style={{flex: 1}}>
    <Toolbar />
    <MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
    />
  </View>
);

answered Jan 23, 2016 at 20:09

Niharika Neeraj

1114 bronze badges

Collectives™ on Stack Overflow

How to show multiple components in reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related