React-redux REST API this.state is null

Question

I am new to Redux and currently using an API to fetch data. I am trying to pass the state from my parent to this.props.children using React.cloneElement. I think I am making a mistake when i am using React.cloneElement as the debugger is showing the state to be null when i pass it to the cloneElement function. Following is my parent render method:

render(){

    const {courses} = this.state;
    debugger;
    let fn = (child) => {
        return React.cloneElement(child, {
            courses: courses
        });
    };

    let childrenWithProps = React.Children.map(this.props.children, fn);

    return (
        <div>
            <div className="container jumbotron jumbotron-fluid">
                <h1>CoursesPage</h1>
                <p>This page adds and lists all the courses</p>
                <Link to="/courses/courseslist">
                    <Button color="primary">Course Listing</Button>
                </Link>
            </div>
            {childrenWithProps}
        </div>

    );
}

From the Console, i can fairly assume it is calling the children correctly, but passing null value in the courses. However when i simply pass <CourseList courses={courses} /> it correctly assumes the state. So where am i exactly going wrong?

I get the following error in the console:

Uncaught TypeError: Cannot read property 'map' of undefined
at CourseList (courseList.js:20)
at ReactCompositeComponent.js:305
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
at Object.mountComponent (ReactReconciler.js:45)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)

..where courseList is the child component.

Much help appreciated.

XPLOT1ON · Accepted Answer · 2017-06-18T13:25:37.560

1

Since you're passing in a variable from the Parent class to the child class CourseList you will need to use props instead

const {courses} = this.props;

Link to Documentation Components and Props

This might be what you want instead.

render(){
    const {coursesList} = this.props;

    return (
        <div>
            <div className="container jumbotron jumbotron-fluid">
                <h1>CoursesPage</h1>
                <p>This page adds and lists all the courses</p>
                <Link to="/courses/courseslist">
                    <Button color="primary">Course Listing</Button>
                </Link>
            </div>
            {coursesList}
        </div>

    );
}

edited Jun 18 '17 at 13:25

answered Jun 18 '17 at 12:43

XPLOT1ON

2,994
2
20
36

@X PLOT1ON that certainly worked, but i didnt clearly understand from the documentation as to when to submit this.state vs this.props. Also, If my intention is to clone the state or 'pass' the state to my child components, how does this.props come in to play here? – Omkar Jun 18 '17 at 12:50
Perhaps this might be a better way to distinguish between props and state https://stackoverflow.com/a/27992380/4540216 In simple terms, props is an object of what the child component accepted and state are variable within the component that can trigger re-rendering – XPLOT1ON Jun 18 '17 at 13:20
I have just edited your code (and pasted in my answer), This might be what you want instead of making copy of the object. @Omkar – XPLOT1ON Jun 18 '17 at 13:26

React-redux REST API this.state is null

1 Answers1