A valid React element (or null) must be returned but not

Question

Hi i am quite new to react and redux , i was creating a poc and got this error , despite my efforts i am not able to solve this here is my code

shoping-app/app/index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import reducer from './reducers/index.js'
import {Provider} from 'react-redux'
let store = createStore(reducer)
import App from './components/App'

 ReactDOM.render(
 <Provider store={store}><App/></Provider>,document.getElementById('app'));

shoping-app/app/components/product.jsx

import React from 'react'
let Product =({id,name,cost,handleClick})=>{
<div>
{name} ${cost}<button onClick={()=>handleClick(id)}>Add to Cart</button>
</div>
}

 export default Product

shoping-app/app/components/App.jsx

import React, { Component } from 'react'
import Products from '../containers/products.jsx'
export default class App extends Component {
render(){
return (
  <div>
    <p>Welcome to our shop</p>
    <Products/>
  </div>
)
}
}

shoping-app/app/components/products.jsx

import React from 'react'
import Product from './product.jsx'
let Products=({products,handleClick})=>(
<section>
<h2>Our Products</h2>
< section>
{products.map(product=><Product
                      key={product.id}
                      {...product}
                      handleClick={handleClick}/>)}
</section>
</section>
)

export default Products

shoping-app/app/containers/products.jsx

import React from 'react'
import {connect} from 'react-redux'
import Products from '../components/products.jsx'

function mapStateToProps(state){
return{
products:state.products
}
}
function mapDispatchToProps(dispatch){
return{
handleClick(id){
dispatch({
type:'ADD_TO_CART',
payload:{
id
}
})

}
}
}

let ProductsContainer =connect(mapStateToProps,mapDispatchToProps) (Products)
export default ProductsContainer

shoping-app/app/reducers/index.js

    import {ADD_TO_CART,REMOVE_FROM_CART,CHANGE_CATEGORY} from '../constants/actionTypes'

    let initialState={
    activeCategory:'food',
    products:[
    {id:193,name:'pizza',cost:10},
    {id:194,name:'pizza2',cost:100},
    {id:195,name:'pizza3',cost:1000},
    {id:196,name:'pizza4',cost:10000},
    ],
    shoppingCart:[]
    }

    export default function reducer(state=initialState,action){
    switch(action.Type){
      case CHANGE_CATEGORY:
        return{
          ...state,
          activeCategory:action.payload
        }
        case ADD_TO_CART:
          return{
            ...state,
            shoppingCart:[...state.shoppingCart,action.payload]
          }
          case REMOVE_FROM_CART:
            return{
              ...state,
              shoppingCart:state.shoppingCart.filter(productId=>productId!=action.payload)
            }
          default:
              return state
    }
    }

Answer 1

The problem is this : shoping-app/app/components/product.jsx

The default exported function of this just references a react component but it does not return anything. In order to return you have to type return keyword explicitly or just wrap your object(the component in this case) in parentheses ().

import React from 'react'
let Product =({id,name,cost,handleClick})=> ({
<div>
{name} ${cost}<button onClick={()=>handleClick(id)}>Add to Cart</button>
</div>
})

 export default Product

Answer 2

For a start change this error in your code.

ReactDOM.render(
 <Provider store={store}><App/></Provider>,document.getElementById('app'));

to

const elem = () => <Provider store={store}> <App/> </Provider>;

ReactDOM.render(elem, document.getElementById('app'));

After that change the curly braces inside your product.jsx to parenthesis like so.

let Product =({id,name,cost,handleClick}) => (  
   // 
   //
)

This way, you'll be returning a valid jsx from Product . By enclosing it in curly braces, you simply start the function definition but return nothing.