1

I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.

I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.

index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Welcome,{DateComp} from './Welcome';
   ReactDOM.render(<Welcome/>,document.getElementById('root'));
   ReactDOM.render(<DateComp/>,document.getElementById('root'));

Welcome.js
 import React, { Component } from 'react';
 class Welcome extends Component {
    render(){
    return(
            <div>
                <h1>Welcome User</h1>
                <p>What is React? React is a declarative,efficient, and flexible 
                JavaScript library for <br />
                building user interfaces. It lets you compose complex UIs 
                from small and <br />isolated pieces of code called "components".
                </p>
            </div>
            );
    } 
 }
class DateComp extends Component {
  constructor(){
  super()
  var today = new Date(),
  date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
  this.state={
      currentDate:date
  }
  }
      render(){
  return(
      <div style={{float: "right"}}>         
      Dated:
      {this.state.currentDate}
      </div>
      );
  } 
}
export default Welcome;
export {DateComp};
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
subashini udayakumar
  • 33
  • 1
  • 5
  • `ReactDOM.render(,document.getElementById('root'));` stomps on what is rendered into `#root` div. You can only render one React app per DOM node. – Drew Reese Jun 14 '21 at 15:31
  • @DrewReese could you pls guide me then how to display both..? – subashini udayakumar Jun 14 '21 at 15:33
  • Does this answer your question? [How to return multiple lines JSX in another return statement in React?](https://stackoverflow.com/questions/23840997/how-to-return-multiple-lines-jsx-in-another-return-statement-in-react) – Daniel Jun 14 '21 at 19:27

2 Answers2

3

Issue

ReactDOM.render(<DateComp/>,document.getElementById('root')); stomps on what was rendered into #root div by ReactDOM.render(<Welcome/>,document.getElementById('root'));. You can only render one React app per DOM node.

Solution

  1. Render each into different DOMNodes, two React apps. (Probably not what you want).

    import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';

ReactDOM.render(<Welcome/>, document.getElementById('root1'));
ReactDOM.render(<DateComp/>, document.getElementById('root2'));

  2. Render each into a single node, single React app.

    import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';

ReactDOM.render(
  <>
    <Welcome/>
    <DateComp/>
  </>,
  document.getElementById('root'),
);
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
0

You can't do that, you are replacing what's inside of root element, so only the last component will display which is <DateComp/>. Use component composition. sth like this.

index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Welcome,{DateComp} from './Welcome';
   ReactDOM.render(<App/>,document.getElementById('root'));

app.js

const App = () => {
       return (<div>
                <Welcome/>
                <Datacomp/>
              </div>)
    }
Anuja
  • 908
  • 6
  • 11