Why can't I render a class/functional component in a class component in React?

Asked Feb 29 '20 at 17:35

Active Feb 29 '20 at 17:35

Viewed 58 times

So I'm trying to learn React here and I wrote this simple code to test out my knowledge. I was under the impression where I can just call a component regardless if it is a class or a functional component from another class component. (which is the parent one in my case) For some reason, while using Code pen there's no errors and it just renders a blank page, why??

function Wowz() {
  return (<div>Seriously?</div>);
}

class Wow extends React.Component {
  render() {
    return <span>WOw</span>;
  }
}

class Og extends React.Component {
  render() {
    return (
      <div>Salut</div>
      <Wow />
      <Wowz />
    );
  }
}

ReactDOM.render(<Og />, document.getElementById("root"));

asked Feb 29 '20 at 17:35

BlueFits

3

try wrapping your elements inside Og with a div tag or fragment if possible – Ramesh Reddy Feb 29 '20 at 17:38
can you share code pen link? – Fahad Mahmood Feb 29 '20 at 17:39
1

If you try running this, you will see the error `Adjacent JSX elements must be wrapped in an enclosing tag` in the console. – Agney Feb 29 '20 at 17:39
for fragment wrapping you should do this below: <>
Salut
> – Fahad Mahmood Feb 29 '20 at 17:40
Ohhh thanks! Searched up that error and came to this https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag I just had to wrap it in like a div or somehting – BlueFits Feb 29 '20 at 17:43

Why can't I render a class/functional component in a class component in React?

0 Answers0