CODEWITHSUNDEEP
reactjsreact-redux
eugenekgn
eugenekgn

Reputation: 1722

React A valid React element (or null) must be returned. You may have returned undefined,

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import * as courseActions from '../../actions/courseActions';

class CoursePage extends React.Component {

  constructor(props, context) {
  super(props, context);

this.state = {
  course: {title: ""}
};

/*
 To enhance performance declare all the bindings here,
 otherwise if they are declare in the mark up binding
 will have to take place during rendering which will take
 performance hit.
*/

this.onTitleChange = this.onTitleChange.bind(this);
this.onClickSave = this.onClickSave.bind(this);
}

onTitleChange(event) {
const course = this.state.course;
course.title = event.target.value;
this.setState({
  course: course
  });
}
 onClickSave() {
this.props.dispatch(courseActions.createCourse(this.state.course));
}

courseRow(course, index) {
  return <div key={index}>{course.title}</div>;
}

render() {
return (<div>
  <div>
    <h1>Courses</h1>
    {this.props.courses.map(this.courseRow)}
    <h2>Add Course</h2>
  </div>
  <input
    type="text"
    onChange={this.onTitleChange}
    value={this.state.course.title}
  />
  <input
    type="submit"
    value="Save"
    onClick={this.onClickSave}
  />
</div>);
}
}

CoursePage.prototype = {
dispatch: PropTypes.func.isRequired,
courses: PropTypes.array.isRequired
};

const mapStateToProps = (state, ownProps) => {
return {
  courses: state.courses
};
};

// since second parameter is not provided, connect ejects connect prop
export default connect(mapStateToProps)(CoursePage);

Getting the following error, I am not sure why CoursePage would be considered a non-react component

invariant.js:44 Uncaught Error: CoursePage(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:166)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:39)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:297)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:222)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:39)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:203)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:628)

Upvotes: 0

Views: 144

Answers (1)

Mμ.
Mμ.

Reputation: 8542

It's to do with the fact that you are changing the prototype of CoursePage. If you want to use PropTypes, You should use CoursePage.propTypes = { ... } instead of prototype. In addition, propTypes are deprecated in react version >= 15.5. So you have to install it as a separate dependency.

Upvotes: 1

Related Questions