skip to content

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>