score:1
the problem is not in your code but in your comment statement.
//
is not jsx comment statement. {/* ... */}
is jsx comment.
change your code to
index.js
const store = createstore(
reducer,
applymiddleware(thunk, logger)
)
render(
<provider store={store}>
<app>
<loadingbar />
</app>
</provider>,
document.getelementbyid('root')
)
app.js
const app = () => (
<div> hello world
{/* < recentchannelitem />
< channelsfield />
<button />
<topnews /> */}
</div>
)
export default app;
score:0
you cannot add app
and loadingbar
as children to provider
because it expects to have only one child which is surely your app
component, actually this is not a proper place to add the loadingbar
at all.
i just modified index.js
to be as follows:
import react, { component } from 'react';
import { render } from 'react-dom';
import hello from './hello';
import './style.css';
import loadingbar from "react-redux-loading-bar";
import react from 'react'
import { render } from 'react-dom'
import { createstore, applymiddleware } from 'redux'
import { provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
import app from "./components/app"
const store = createstore(
reducer,
applymiddleware(thunk, logger)
)
render(
<provider store={store}>
<app />
</provider>,
document.getelementbyid('root')
)
app.js
:
import react from 'react'
// import channelsfield from './channelsfield'
// import recentchannelitem from './recentchannelvalues'
// import button from '../containers/button'
// import topnews from '../containers/topnews'
const app = () => (
<div>
<h1> hello </h1>
</div>
)
export default app;
and the component is rendered and i can see hello.
usually elements like loadingbar
are used inside your components to be displayed when you are waiting for asynchronous tasks to complete (for example fetching data from api)
so i suggest importing it using import
statement inside app
(or any other component) and use it.
Source: stackoverflow.com
Related Query
- not able to render my react component in redux way
- react component not render new data from redux store
- Is there a way in React to render a component into HTML that is not its initial state?
- React router v4 with redux not able to re-render component
- Not able to render React Component to many times
- Not able to render react component in react router
- Not able to render react component
- Prevent component from re-rendering when property not used in render function React Redux
- React not able to dynamically render correct component
- React Redux Typescript APP Store Updated But Component Not Re - render
- Functions are not valid as a React child. This may happen if you return a Component instead of from render
- How to render React Component into itself, in a recursive way
- React Redux Store updating, but component not re-rendering
- React - component will not render in foreach loop?
- React Redux correct way to handle error / success messages unique to each component
- React SVG import as a Component does not render
- Which is the right way to detect first render in a react component
- onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
- React - Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render
- React JS this.props.data not defined in getInitialState for child component even though it is defined in render (and is defined in parent)
- Component does not rerender but redux state has changed via react hooks
- React - responsive app - better to hide element in component via CSS or not render it
- Proper way to render content without flickering ? React + Redux + TS
- React router dom redirect problem. Changes url, does not render component
- React Router does not render Component
- React Component to render children conditionally not working as I want it to
- React component not updating on final dispatch and update of redux state
- React native redux not updating component
- Routes/Redirects do not render in a React Router 4 & Redux Authorization
- React router redux Link changing route, but not component
More Query from same tag
- calling a method from outside of class (React.js)
- Using ckeditor with Typescript
- React: this.props.posts.map is not a function
- What is the issue when consuming an state in child component after useEffect?
- Comparing and returning index in lodash
- Return promise from Fetch when posting through Nodemailer
- Making a slide down menu
- ReactCSSTransitionGroup with CSS Modules
- React - Run a function on useEffect and on element click?
- Is there a way to validate all fields in a form?
- How to use a component to act as clickable alternative?
- How can I wait until request to Firebase completes and then render app in ReactJS?
- Why is my content not showing up in grids? (React.js)
- "The final argument passed to useEffect changed size between renders", except I don't think it does?
- react-waypoint onEnter/onLeave is not giving value
- React js PrivateRoute show hide a dashboard Component based on JSON web token and fetch call
- Why it is giving me 'Cannot read property 'deleteProduct' of undefined' error react Js
- How to combine react-router useRouterHistory with redux-simple-router
- Subscribe to action in one React component published from another
- Use typescript to limit payload type with action name
- How to update an item in an array of an object
- ReactJS: Need to change card styling using onClick function
- Set header using in React (ajax)
- create-react-app Static Site - Reading JSON file
- Can not Login with credentials of any other user than the one created at first place Mongodb and react
- How to run temporary effect when data changes in React?
- Cant Update The state after getting data from the input React js
- SASS not rendering in React / Webpack project
- React + useState + Array + Mutation = error
- props are not working when using map method in react.js