react basic multiple element rendering

Question

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>

Arian Nargesi · Accepted Answer · 2020-08-11 17:10:06Z

1

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/> 
 )
}

edited Aug 11, 2020 at 17:10

answered Aug 6, 2020 at 19:23

Arian Nargesi

5611 gold badge4 silver badges17 bronze badges

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

2 Comments

Vzupo Over a year ago

in the snippet above I have 1 component and an element. How do I make that sample work?

Arian Nargesi Over a year ago

@Vzupo Snippet Edited

Collectives™ on Stack Overflow

react basic multiple element rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related