score:0
the obvious error here is a copy&paste one:
return (
<div classname="app">
<div classname="content">
{!isloaded && (
<provider store={store}>
<app />
</provider>, // remove this comma
rootelement // remove this line
)}
but that won't solve your problem itself. rendering it just like you initally showed should be possible.
your problem is most commonly caused by multiple versions of react, react-redux or react-dom being installed at the same time.
you can check that via yarn why react
etc. telling you how to fix it goes a bit beyond the scope of a stackoverflow question with a different question though - there are just too many options ;)
score:0
solved. i tried to render <provider>
from app.js
when i should have rendered from index.js
. here is how my index.js
looks like now:
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import reportwebvitals from './reportwebvitals';
import { createstore } from 'redux';
import { provider } from "react-redux";
import { counter } from './cart.js';
let store = createstore(counter);
reactdom.render(
<react.strictmode>
<app />
</react.strictmode>,
document.getelementbyid('root')
);
reactdom.render(
<provider store={store}>
<app />
</provider>,
document.getelementbyid('root')
);
reportwebvitals();
Source: stackoverflow.com
Related Query
- react - conditional rendering inside component return function
- Mocking a React component function that is enclosed by Redux Provider component
- React Conditional Rendering of Component Inside Function Not Working
- return value is not rendering when returned from inside the handleclick() function in react
- react not rendering JSX inside map function
- How to access React class function inside Redux dispatch
- React / Redux app dispatching an action inside settimeout
- Rendering React app does not apply when adding items to an array inside a state
- How to do condtitional rendering in React and ES6 inside the map function
- Getting problem while rendering function inside the render in React
- React to redux state changes by executing function inside of component
- How to yield inside an external callback function in react redux saga?
- _this2.props.signup is not a function in React Redux app
- Django not rendering the images present in the 'images' folder inside the build folder after merging the react app
- React - Wrapping all components in redux provider with store injection, Multi page app
- Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component when using Create React App and Formik
- Invalid hook call. Hooks can only be used inside of a react function component... useEffect, redux
- Mock function doesn't get called when inside 'if' statement - React app testing with jest and enzyme?
- React app not rendering inside react-native-webview
- How to show a loading indicator in React Redux app while fetching the data?
- Rendering React components with promises inside the render method
- React Hooks Error: Hooks can only be called inside the body of a function component
- React Warning: Cannot update a component from inside the function body of a different component
- Why IE 11 display blank page rendering react app
- Nested components testing with Enzyme inside of React & Redux
- Prevent react component from rendering twice when using redux with componentWillMount
- Function inside functional component in React hooks - Performance
- Rendering a React component inside a Bootstrap popover
- React App - createProxyMiddleware is not a function
- Async data flow in React App with Redux + ReactRouter?
More Query from same tag
- Re-render child when prop changes in App.js
- Form submit after multiple tasks are completed in React
- React useeffect hook
- antd datepicker prepopulate value with formik
- Styled-component is not getting apply to the component
- React dispatch not working (userService function not triggered in userAction)
- Props that are sent to another component using React Router show up as undefined and as [object%20Object]
- How to download an image from api in react without opening it?
- How to update the prop state in ReactJs when an event on the Server has happened
- Dynamic import of react hooks
- react-google-recaptcha "ref" type error in React typescript
- Cardlist is not defined no-undef
- I'm getting this "Maximum update depth exceeded." while trying to handle firebase authentication error with useEffect
- React make an async call on data after retrieving it from the state
- Custom Proxy in Create React App using Typescript
- How can I create a dynamic query in Amplify Datastore
- How to extend JSX.IntrinsicElements['div']? TS2499
- useState updating for all list elements
- Get element position in the DOM on React DnD drop?
- React router v4 onUpdate
- Export to CSV button in react table
- How to mock a function using Jest that has parameters in it?
- Is it wrong to use an action's payload inside a component with react-redux?
- How do you programmatically update query params in react-router?
- Deploying ASP.NET Core 2.1 React App on IIS server
- How to render nested array elements in React?
- How to solve double API fetch on universal ReactJS
- react - how to pass event from another class
- Pagination not displaying desired amount of pages
- Why couldn't my gulp work