CODEWITHSUNDEEP
reactjs
Vzupo
Vzupo

Reputation: 1478

react basic multiple element rendering

I am brand new to react with a vuejs background. I am trying to learn the same concepts like building SPAs and such within reactjs. I have a simple page where I am trying to render multiple elements or multiple components, but I am not sure how to modify the code to render multiple elements in that line.So I added myElement2, but not sure how to enable it. Also, what if it was two components instead of elements?

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
  
<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
  render() {
    return <h1>Hello World!</h1>
  }
}
const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
  
  
);
}
const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
  
  
);





ReactDOM.render(myelement, document.getElementById('mydiv'))

</script>

</body>
</html>

Upvotes: 0

Views: 45

Answers (1)

Arian Nargesi
Arian Nargesi

Reputation: 561

at first, in react, all components names must start with uppercase letters. for rendering multiple components you can return them in the render method like this

render(){
  return (
    <div>
      <ComponentOne/>
      <ComponentTwo/>
      <h1>My Element</h1>
    <div/> 
 )
}

Upvotes: 1

Related Questions