How to render multiple components in react?

Question

I'm trying to learn react and having problem with a small area. So this is my App.js :

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component{
  render(){
    return <h1>Heyy</h1>;
  }
  render(){
    return <h1>Helo</h1>
  }
}

export default App;

It only renders the Helo. If i have multiple components lets say NavBar and ImageComp, how would i render it on single page with before passing it to ReactDOM.render?

From what i understand, every components goes into App before going into index.js but then how would i include multiple components in App?

Dupocas · Accepted Answer · 2019-08-05 20:05:16Z

4

A Component MUST return either JSX or nothing null. Everything you need to render from a class based component should go inside render method:

class App extends Component{
    render(){
         return(
           <>
               <h1>Title</h1>
               <h2> Subtitle </h2>
               <MyCustomComponent />
           </>
        )
    }
}

The notation <> </> it's just a shortcut to <React.Fragment /> to avoid returning adjacent JSX blocks

edited Aug 5, 2019 at 20:05

answered Aug 5, 2019 at 19:58

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

2 Comments

STOPIMACODER Over a year ago

So does all my components go into one render method? and can you provide example with components rather than html?

STOPIMACODER Over a year ago

Thank you! This has been very helpful!

A. Horst · Accepted Answer · 2019-08-05 20:59:03Z

0

React also permits you to return an Array of elements.

class App extends Component{
  render(){
     return[          
           <h1>Title</h1>,
           <h2> Subtitle </h2>,
           <MyCustomComponent />
     ]
  }
}

answered Aug 5, 2019 at 20:59

A. Horst

888 bronze badges

Comments

Adrian · Accepted Answer · 2023-09-28 09:10:30Z

0

This looks ok, I'm newbie

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

var element = React.createElement
(
  'h1', 
  { className: 'greeting' }, 
  'Hello, world2!'
);

var buttonelem = React.createElement
(
  'button', 
  { className: 'button-class' }, 
  'Cicker'
);


ReactDOM.render([element,buttonelem], document.getElementById('root'));

reportWebVitals();

answered Sep 28, 2023 at 9:10

Adrian

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to render multiple components in react?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related