not able to render my react component in redux way

Question

• I am new to react.
• I am trying to display a component.
• but right now I am getting an error
• so I debugged and commented the app.
• but still I am facing an error.
• can you tell me how to fix so that infuture I will fix it myself
• providing my code snippet and stackblitz code below.

https://stackblitz.com/edit/react-zm9t65?file=components%2FApp.js

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 />
             <LoadingBar />

  </Provider>,
  document.getElementById('root')
)

Answer 1

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.

Answer 2

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;