componentDotNotation.jsx
Using JSX component dot notation.
// A simple Movie component
function Movie({children}) {
return (
<div id="user">
{children}
</div>
);
}
const TitleComponent = ({ children }) => {
return (
<div id="title">
{children}
</div>
);
};
const RatingComponent = ({ children }) => {
return (
<div id="rating">
{children}
</div>
);
};
// Assign properties just like a regular object
Movie.Title = TitleComponent;
Movie.Rating = RatingComponent;
export default Movie;
<!-- The Movie component can then be used as follows -->
<Movie>
<Movie.Title>
<h4>Black Panther: Wakanda Forever</h4>
</Movie.Title>
<Movie.Rating>
<p>IMDB: 7.4/10</p>
</Movie.Rating>
</Movie>