mapStateToProps() in Connect(EquipmentMetadata) must return a plain object. Instead received undefined

user_7957752 0
Viewed 906

I am getting the following errors when running my code and am not sure where to start with debugging this.

mapStateToProps() in Connect(EquipmentMetadata) must return a plain object. Instead received undefined. Warning: Failed prop type: The prop name is marked as required in EquipmentMetadata, but its value is undefined.

This is the index file :

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
// import Root from './containers/Root'
import { setName } from './actions'
// import createStore from './common/store/'
import { Provider } from 'react-redux'
import EquipmentMetadata from './containers/EquipmentMetadata'
// import ReduxPiece from './components/ReduxPiece'
import configureStore from './configureStore'

const store = configureStore()

window.EquipmentMetadata = {
    store,
    setName
}

render(
        <Provider store={store}>
        {/* <Root /> */}
        <EquipmentMetadata />
        </Provider>,
    document.getElementById('equipment-metadata')
)

equipmentmetadata.js:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Greeting from '../components/Greeting'
// import ReduxPiece from "../components/ReduxPiece";

class EquipmentMetadata extends Component {
  render () {
    // const { name } = this.props

    return (
      <div>
      <Greeting 
        // name={name}
       />
     {/* <ReduxPiece /> */}
     </div>  
    )
  }
}

EquipmentMetadata.propTypes = {
  name: PropTypes.string.isRequired
}

function mapStateToProps (state) {
  // const { name } = state
  // return {
  //   name
  // }
}

function mapDispatchToProps (dispatch) {
  return {}
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EquipmentMetadata)
react-redux reactjs
2 Answers

It is telling you that mapStateToProps should be returning something - you've commented all of it entirely. If you don't want it to return anything then just make it return {}. Also, in commenting it out, your EquipmentMetadata says in its propTypes that it requires a name prop, which you now aren't sending it.

user_70487750

mapStateToProps needs to be a function which returns an object. The notation of the mapStateToProps function can be as given below.

//ES5
function mapStateToProps (state) {
  return {
    key: name of the reducer function
  }
}

//ES6
const mapStateToProps = (state) => ({
    key: name of the reducer function
})

For your code you can try by making the changes like

function mapStateToProps (state) {
  return {
    name: state.nameOfReducer.valueinReducer
  }
}
user_98278390
Related