CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-redux
Ethan Williams
Ethan Williams

Reputation: 88

Invalid prop `component` of type `object` supplied to `Route`, expected `function`

I've been struggling with this for awhile and can't seem to find anyone else with the same issue. I've got this component and container which are my start screen which should be rendered at the initial route.

components/DifficultySelection.jsx

import React from 'react';
import PropTypes from 'prop-types';

export default class DifficultySelection extends React.Component{

  constructor(props){
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(e){
    this.props.onDifficultyClick(e.target.innerHTML);

    this.props.history.push("/play");
  }

  render(){
    return (
      <div>
        <h2>Select your difficulty</h2>
        <div>
          <h3 onClick={this.onClick}>Easy</h3>
          <h3 onClick={this.onClick}>Medium</h3>
          <h3 onClick={this.onClick}>Hard</h3>
        </div>
      </div>
    )
  }
}

DifficultySelection.propTypes = {
  onDifficultyClick: PropTypes.func.isRequired
}

containers/DifficultySelection.jsx

import DifficultySelection from '../components/DifficultySelection';
import { setBoardSize } from '../actions/actions';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
  onDifficultyClick: (difficulty) => {
      console.log(difficulty);
      let boardSize = 8;
      if(difficulty === "Medium")  boardSize = 12;
      if(difficulty === "Hard") boardSize = 15;
      if(difficulty === "Extreme") boardSize = 20;

      dispatch(setBoardSize(boardSize));
    }
  }
}

export default withRouter(connect(
  null,
  mapDispatchToProps
))(DifficultySelection)

Below is where I try and assign these components to a route. This is where I am getting the error. As an aside, the console logs I put in show that the components I'm importing are Route functions, the image of which is included because it should be a class I think.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import reducers from './reducers/reducers';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';

import DifficultySelection from './containers/DifficultySelection';
import Board from './containers/Board';

let store = createStore(combineReducers(reducers));

console.log(DifficultySelection.type);
console.log(Board.type);

ReactDOM.render(
  <Provider store={store}>
    <HashRouter>
      <Switch>
        <Route exact path="/" component={DifficultySelection}/>
        <Route exact path="/play" component={Board}/>
      </Switch>
    </HashRouter>
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();

enter image description here

Upvotes: 2

Views: 2765

Answers (1)

vapurrmaid
vapurrmaid

Reputation: 2307

The issue is with:

export default withRouter(connect(
  null,
  mapDispatchToProps
))(DifficultySelection)

The syntax for connect is connect(mapStateToProps, mapDispatchToProps)(component)

Putting your call on a single line, it's perhaps easier to see the error:

withRouter(connect(null, mapDispatchToProps))(DifficultySelection)

connect never properly uses DifficultySelection as an arugment, meaning your file is not returning the connected component.

Simply rearrange it as follows:

export default connect(null, mapDispatchToProps)(withRouter(DifficultySelection))

Or, as suggested in the comments, withRouter can be omitted since this component will receive props from Route:

export default connect(null, mapDispatchToProps)(DifficultySelection)

Upvotes: 6

Related Questions