2

I'm try create two component of ReactJS in the same file JS.

I have two component called "Welcome" and Goodbye"

 class Welcome extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}
 class GoogBye extends React.Component {
    render() {
        return <h1>GooyBye  {this.props.message}!</h1>;
    }
}

Okay here I try create two compoents and next I try call from the ReactDOM.render of this way:

 ReactDOM.render(
    <Welcome message="my friend" />,
   <GoodBye message="see you later" />,
    document.getElementById("root")
  
);

I am trying create two components and next I call the two

full code:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
 class Welcome extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}
 class GoogBye extends React.Component {
    render() {
        return <h1>GooyBye  {this.props.message}!</h1>;
    }
}

      
 ReactDOM.render(
    <Welcome message="my friend" />,
   <GoodBye message="see you later" />,
    document.getElementById("root")
  
);
      
    </script>
</body>
</html>

I am looked for a solve in stackoverflow before of I create this question and I saw this only but is not the solve for my problem: this

I am start witn React JS with this tutorial

simon
  • 621
  • 1
  • 6
  • 14
  • You need a parent element. – Andrew Li Jul 08 '18 at 21:09
  • `ReactDOM.render` takes a single React component and renders it on the specified element (in your case `document.getElementById("root")`). You should probably have an `App` React component that then renders your other two components, and pass that into `ReactDOM.render`. – Troy Carlson Jul 08 '18 at 21:10

1 Answers1

5

You need to load the react-dom library as well, and ReactDOM.render can only render one element, so you need to wrap your components.

Example

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.message}!</h1>;
  }
}
class GoodBye extends React.Component {
  render() {
    return <h1>GoodBye {this.props.message}!</h1>;
  }
}
ReactDOM.render(
  <div>
    <Welcome message="my friend" />,
    <GoodBye message="see you later" />
  </div>,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Tholle
  • 108,070
  • 19
  • 198
  • 189