Trying to pass JSX as prop

Question

UPDATE:

Code actually works! Had a header blocking the content and thought it wasn't rendering properly. Sorry for the confusion!

---

I am trying to pass this simple <p> JSX tag as a prop to Navigation and then display it, but for some reason it's not working.

Here is my App.js file that passes a JSX element to Navigation:

const App = () => {
  return (
    <div>
      <Navigation main={<p>Testing!@22</p>} />
    </div>
  );
}

export default App;

Here is my Navigation.js file that should take the prop main and display it:

const Navigation = (props) => {
  return (
    <div className={classes.root}>
      <main className={classes.content}>{props.main}</main>
    </div>
  );
}

export default Navigation;

Answer 1

I have tried and it worked for me.

Link: https://codesandbox.io/s/friendly-wescoff-vz451?file=/src/App.js

App.js

import React from "react";
import Navigation from "./Navigation";
import "./styles.css";

const App = () => {
  return (
    <div>
      <Navigation main={<p>Testing!@22</p>} />
    </div>
  );
};

export default App;

Navigation.js

import React from "react";

const Navigation = (props) => {
  return (
    <div>
      <main>{props.main}</main>
    </div>
  );
};

export default Navigation;