We Keep Coding

Invalid hook call - Material Ui

`× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer
(such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app`
I am new to react so this means I just follow tutorials from the internet and I'm trying to make a sidebar for my project. This sidebar is consist of a search box which includes a search icon from material-ui. After I install the #material-ui/icons and #material-ui/core and imported them to the javascript file (sidebar.js) that I'm working, this error pops-up. However, this invalid hook call says that the problem occurs at my other file (index.js) pointing at a line of code that starts with ReactDom.render( , although the react and react-dom are in the same version. This is the code from my sidebar.js:
import React from "react";
import SearchIcon from '#material-ui/icons/Search'
const Sidebar = () => {
return (
<div className="sidebar">
<div className="sidebar__header">
<div className="sidebar__search">
<SearchIcon className="sidebar__searchIcon"/>
<input placeholder="Search" className="sidebar__input"></input>
</div>
</div>
<div className="sidebar__threads"></div>
<div className="sidebar__bottom"></div>
</div>
)
}
export default Sidebar
And this is my code from the index.js
import React from "react";
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
ReactDom.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

You need to enable JavaScript to run this app. After deployed react app to firebase

I am newbie to react and made a portfolio on it and when I run it on local server, it works perfectly but after deploying to firebase by following this link https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-98063c5bf425, it is showing blank page and in console body "You need to enable JavaScript to run this app." . What should be done? What files should I share? Any help will be appreciated.. Thanks !
Here is my index.js
import React from "react";
import ReactDOM from "react-dom";
import { BaseProvider, LightTheme } from "baseui";
import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";
import "./index.css";
// import "bootstrap/dist/css/bootstrap.min.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "./assests/font-awesome/css/all.css";
const engine = new Styletron();
ReactDOM.render(
<StyletronProvider value={engine}>
<BaseProvider theme={LightTheme}>
<App />
</BaseProvider>
</StyletronProvider>,
document.getElementById("root")
);
serviceWorker.unregister();

You should enable javascript in your browser, see bellow how.
Chrome
Safari
Firefox
Edge

problem with compiling a react app for the first time

I am a beginner in react js, I have a problem with compiling a react app, can someone show me the problem, please
index.js:
import React from 'React'
import ReactDOM from 'react-dom';
import Myinfo from 'Myinfo.js';
ReactDOM.render(<Myinfo />, document.getElementById('root'));
Myinfo:
import React from "react";
function Myinfo() {
return (
<div >
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
</div>
);
}
export default Myinfo;
Here is the file structure of the project.
C:
-react js:
-reactjs:
-src:
-Myinfo.js
-index.js

Since Myinfo.js is in the same directory as your react app then try this
import Myinfo from './Myinfo.js';

React Props not working, complete beginner

I'm following tutorial carefully, but I just can't pass props to function component and extract data from props object.
I think it's export-import error, but I would really appreciate nudge in the right direction.
I'm using create-react-app
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Greeting = (props) => <h1>Hello {props.name}</h1>;
export default Greeting;
It only prints out Hello in H1 tag, and just leaves out the rest of it.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const element = <Greeting name="irakli" />;
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();

In My index.js:
Instead of import App from './App'; replace with import Greeting from './App';

Instead of Greeting you should change to App because you are importing it as App. So
const element = <App name="John" />

in App.js use 'export default App'.

react router won't serve me components other paths than '/'

Hi i added react router to my project but it wont serve me path others than '/'
import React from 'react';
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import store from './reducers'
import Header from './header/header'
import Toolbar from './toolbar/toolbar'
import Createprocess from './createprocess/createprocess'
import Hider from './createprocess/hider'
ReactDOM.render(<Provider store={store}>
<Router>
<Route path='/module' component={Createprocess} />
</Router>
</Provider>,
document.getElementById('root')
)
ReactDOM.render(<Header/>,document.getElementById('header'))
ReactDOM.render(<Toolbar/>,document.getElementById('tools-bar'))
this my createprocess component code :
import React, {Component} from 'react'
import Actionsbar from './actionsbar'
import Processdisp from './processdisplay'
import DefineTask from './taskdefinition'
import store from '../reducers'
export default class Createprocess extends Component{
render(){
return (<div id='create-process' className='default app-container'>
<Actionsbar/>
<Processdisp data={store.getState().processState}/>
<DefineTask/>
</div>)
}
}
when i add the module path i can't get it from my browser even if i used many combination
but the only time react renders is when i use th '/' path and i call my html page on the browser
i'm web designer i started webdevelopping recently and it seem that i can't get my head around those paths and serving pages, help please (i'm using babel/webpack).

Wrap the route in a Switch component from react router

I found the solution, it seems that because there is no server serving pages i should have user HashRouter istead of BrowserRouter