trouble to show component in react - css

Question

im using an old version of a CRUD so i think that some codes aren't working any more, but vscode is not point it like an error, so the page goes on but my content box still empty. could somone help me?
these are 4 codes that i think that should be improved...
first my header that dont show me the props.icon tasks
import './Header.css'
import React from 'react'
export default function props () {
return (
<header className = "header d-none d-sm-flex flex-column">
<h1 className="mt-3">
<i className={`fa fa-${props.icon}`}></i>{props.title}
</h1>
<p className="lead text-muted">{props.subtitle}</p>
</header>
)}
here my main.jsx which my header goes inside by import
import './Main.css'
import React from 'react'
import Header from './Header'
function props () {
return (
<React.Fragment>
<Header {...props}/>
<main className="content container-fluid">
<div className="p-3 mt-3">
{props.children}
</div>
</main>
</React.Fragment>
)
}
export default props
now my app.jsx and app.css wht render my Htmls
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import './App.css'
import React from 'react'
import {HashRouter} from 'react-router-dom'
import Routes from './Routes'
// import Home from '../components/home/Home'
import Logo from '../components/template/Logo'
import Navi from '../components/template/Navi'
import Footer from '../components/template/Footer'
// import props from '../../../frontend2/src/components/template/main'
function Props () {
return(
<HashRouter>
<div className="App">
<Logo />
<Navi/>
<Routes/>
<Footer />
</div>
</HashRouter>
)
}
export default Props
//////////////////////////
:root{
--bg-dark: #1a2f3a;
--logo-height: 100px;
--header-height: 100px;
--aside-width: 225px;
--footer-height: 40px;
--shadow:
0 2px 23px 0 rgba(0, 0, 0, 0.1)
0 2px 49px 0 rgba(0, 0, 0, 0.06)
}
*{
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
/* layout em grid */
.App {
margin: 0px;
display: grid;
grid-template-columns: var(--aside-width) 1fr;
grid-template-rows:
var(--header-height)
1fr
var(--footer-height);
grid-template-areas:
"logo header"
"menu content"
"menu footer";
height: 100vh;
background-color: #f5f5f5;
}
aside.logo{
grid-area: logo;
}
header.header{
grid-area: header;
}
aside.menu-area{
grid-area: menu;
}
main.content{
grid-area: content;
}
footer.footer{
grid-area: footer;
}
then my routes.jsx
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
and finally but not less important my home which own my main and is my / path
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
please help me out here, im stucked search this error by 2 days now, im prety sure that i got a sintax error, if u got this expertise please share
here are some issues from the console but i dont even know from where came this history one, pleasee...
Warning: Please use require("history").createMemoryHistory instead of require("history/createMemoryHistory"). Support for the latter will be removed in the next major release.
stack_frame_overlay_proxy_console # index.js:2178
index.js:2178 Warning: Please use require("history").PathUtils instead of require("history/PathUtils"). Support for the latter will be removed in the next major release.
stack_frame_overlay_proxy_console # index.js:2178
react-dom.development.js:88 Warning: componentWillMount has been renamed, and is not recommended for use. See react-unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.
Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
Please update the following components: HashRouter, Route, Router, Switchnull

Answer 1

I think you might have got a bit mixed up regarding the nature of props in the React framework. Consider reading over the documentation to get more of an overview of how we use them to structure data flow in React applications.
To put it briefly, props are the inputs that components pass to one another in order to populate the UI and update the state of an application. In functional React, we can think of them as the parameters that a function (i.e. component) takes in order to return a given output in JSX.
So when it comes to your code, naming all your component functions Props is not the same as them actually having props available to use. First, a component's parent has to pass it a prop inside the JSX, and then it has to access that prop from the function parameters before it can be used. Here is a simplified example below which will hopefully make the pattern more clear for you:
// App.jsx
function App() {
return (
<div>
<Header title={'someValue'}/>
<MainComponent />
</div>
);
};
// Header.jsx
function Header(props) {
return (
<header>
<h1>{props.title}</h1>
</header>
);
};
I see you were also trying to use props.children which is a slightly different feature and does not work in the same way. The children of a React component are any elements that that component wraps around in the instance that it is declared. The children themselves do not have to passed as props in the usual manner, but they must still be accessed from the function's parameters. In this example, the props.children of MainComponent is the div with the class child:
// App.jsx
function App() {
return (
<div>
<MainComponent>
<div class="child">
</div>
</MainComponent>
</div>
);
};
// MainComponent.jsx
function MainComponent(props) {
return (
<main>
{props.children}
</main>
);
};