React Wrapping up component around js content-CodePudding

So i am making a react project in which everything works fine until i start wrapping my component. So basically Card.js is wrapping around Meetupitem.js and Layout.js is wrapping around App.js. before this is looks fine - https://github.com/mohitRana-04/React-1/tree/first/react-day4 but after this i start facing error. I have used props.children to take all the information which are being passed to the respective components. And Folder having this issue - https://github.com/mohitRana-04/React-1/tree/first/react-day5

Compiled with problems:X

ERROR in ./src/components/layout/Layout.module.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[6].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[6].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/layout/Layout.module.css)

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Invalid class or id selector syntax
    at C:\Users\mohit\Desktop\Project\React-1\react-day4\src\components\layout\Layout.module.css:1:1
    at transform (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:198:17)
    at C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:79:44
    at Array.map (<anonymous>)
    at Selector.map (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-selector-parser\dist\selectors\container.js:347:23)
    at transform (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:79:25)
    at C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:54:15
    at Array.map (<anonymous>)
    at transform (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:46:31)
    at Processor.func (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-modules-local-by-default\src\index.js:238:5)
    at Processor._runSync (C:\Users\mohit\Desktop\Project\React-1\react-day4\node_modules\postcss-selector-parser\dist\processor.js:102:26)

Layout.js

import React from "react";
import classes from "./Layout.module.css";
import MainNavigation from "./MainNavigation";
function Layout({ props }) {
  return (
    <div>
      <MainNavigation />
      <main className={classes.main}>{props.children}</main>
    </div>
  );
}

export default Layout;

MeetupItem.js

import React from "react";
import classes from "./Layout.module.css";
import MainNavigation from "./MainNavigation";
function Layout({ props }) {
  return (
    <div>
      <MainNavigation />
      <main className={classes.main}>{props.children}</main>
    </div>
  );
}

export default Layout;

App.js

import React from "react";
import { Routes, Route } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import FavoritesPage from "./pages/Favorites";
import NewMeetupPage from "./pages/NewMeetup";
// import MainNavigation from "./components/layout/MainNavigation";
import Layout from "./components/layout/Layout";

function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<AllMeetupsPage />} />
      </Routes>
      <Routes>
        <Route path="/favorites" element={<FavoritesPage />} />
      </Routes>
      <Routes>
        <Route path="/new-meetup" element={<NewMeetupPage />} />
      </Routes>
    </Layout>
  );
}

export default App;

Card.js

import React from "react";
import classes from "./Card.module.css";

function Card(props) {
  return <div className={classes.Card}>{props.children}</div>;
}

export default Card;

CodePudding user response：

in directory react-day5/src/components/layout/Layout.module.css you have defined a class selector incorrectly . main must be .main without spaces.that's it.

CodePudding user response：

You are destructuring the props in the Layout component but supplying props as the property. this should either be:

    function Layout({ children }) {
  return (
    <div>
      <MainNavigation />
      <main className={classes.main}>{children}</main>
    </div>
  );
}

function Layout(props)