I am trying to add the react sticky header to my stepper.
but the problem is if I add inside my App.js its not rendering.
so I started debugging the App.js code.
if I give console inside my render method of App.js its not displaying console.log("App---->");
right now I am getting Cannot read property 'getState' of undefined error
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/6zv5n0ro9z
App.js
import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...
class App extends React.Component {
render() {
console.log("App---->");
return (
<StickyContainer>
{/* Other elements can be in between `StickyContainer` and `Sticky`,
but certain styles can break the positioning logic used. */}
<Sticky>
{({
style,
// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => <header style={style}>{/* ... */}</header>}
</Sticky>
{/* ... */}
</StickyContainer>
);
}
}
index.js
import React from "react";
//import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { logger } from "redux-logger";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
//import reducer from "./reducers";
import thunk from "redux-thunk";
//const store = createStore(reducer, applyMiddleware(thunk, logger));
//ReactDOM.render(<Demo />, document.querySelector("#root"));
render(
// <Provider store={store}>
<Provider>
<App />
</Provider>,
document.getElementById("root")
);
You need to either pass a store to the Provider as Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Provider element entirely so you are just rendering the App element. The current stack trace shows that the error is in Provider.
You also need to add:
export default App;
to the bottom of App.js.
You need to pass your store as props to the wrapping Provider
render(<Provider store={store} >
<App />
</Provider>,document.getElementById("root"));
If you're going to render a React-Redux <Provider>, you must create a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.
Chances are that you would have not set the store property correctly.
Make sure that store is imported this way.
import store from './store';
and not the below way
import {store} from './store';
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import store from './store';
Running code should look like below
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
enter code here
For anyone else stumbling on this, try to pull your <Provider> up a level and make use of your getters from a child.
Make sure you have imported import store from './redux/store' and pasing provider as <Provider store={store}> here I am emphasizing on `store' file and import must be small letter must not be camel or uppercase. This is what i have found during redux learning.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
Related
When I try to access the relevant component under app.js, I get the error "WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars". When I run the project, I see tags in the form of in html, but the component does not appear on the screen. I have included the codes below. Thanks in advance.
Note : Changes under .eslintrc.json didn't work.
App.js
import React from 'react';
import personAdd from './screens/personAdd';
function App() {
return (
<personAdd />
)
}
export default App;
personAdd.js
import React from 'react';
class personAdd extends React.Component{
render(){
return(
<div id = "personAdd">
<h1>Kullanıcı Bilgileri</h1>
<form>
<label htmlFor="id">Ad</label>
<input id="id"/>
<button>Add</button>
</form>
</div>
)
}
}
export default personAdd;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import personAdd from './screens/personadd';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
You don't need to manually create new root elements for every component you want to render.
React inserts an initial element 'root' into the DOM so that the app can render within that.
Try removing:
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
If you want to render your personAdd component you can add it as a child of App as you've already done.
function App() {
return (
<personAdd />
)
}
The other reason you're getting these issues is because you're not using Pascal case when naming your components (PersonAdd).
function App() {
return (
<PersonAdd />
)
}
In addition as others have mentioned, stick to function components rather than class components.
I'd recommend having a look at the React Beta Docs which now do everything with functional components. There are helpful walkthroughs on there that should help you out.
As #evolutionxbox said. Try naming the component with UpperCamelCase. It's used to specify a React element
https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
Also, it is now common to create components as functions and not Classes. Of course it's up to you if you do prefer classes.
https://reactjs.org/docs/components-and-props.html#rendering-a-component
`× 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')
);
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'.
I don't see any problem with my code, App is a component and it's used, but eslint gave me this warning
./src/containers/app/index.js
Line 6: 'App' is assigned a value but never used no-unused-vars
my code
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import store, { history } from './store'
import App from './containers/app'
import './index.css'
const target = document.querySelector('#root')
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<App />
</div>
</ConnectedRouter>
</Provider>,
target
)
Any clue how to fix that for react?
The standard ESLint rules don't know anything about JSX. You'll need to use https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md in order to get the behavior you want.
I have following implementation of "react-router-dom", but I am not able to get it working. can someone guide me what's the underlying issue.
App.jsx
import React from "react";
import Main from "../components/Main";
import Home from "../components/Home";
import { BrowserRouter, Match, Miss, Link } from 'react-router-dom';
const App = () => (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={Main} />
<Match pattern="/home" component={Home} />
</div>
</BrowserRouter>
);
export default App;
Index.jsx
import React from "react";
import ReactDOM from "react-dom";
import Main from "./components/Main";
import Home from "./components/Home";
import Page from './components/Page';
import App from "./config/App";
ReactDOM.render(
<App/>,
document.getElementById('app')
);
I get the following error :
Please refer to the docs of React Router v4
Match and Miss are from previous versions of react-router-v4.alpha
With the current stable release of v4. You should use Route instead of Match. Miss is not there anymore.
I think this should solve your problem.
First of all, you should use Route instead of match.
Second, imports are case sensitive.
Third, match as per the doc you will get match object as prop.