CODEWITHSUNDEEP
javascriptreactjs
Matt Fuller
Matt Fuller

Reputation: 125

Error: Element type is invalid with React-app

I can see that there is a lot of questions oriented around this particular error, but most seem unanswered, and those that have been answered do not apply (or I don't understand how they apply.).

This is the Error I'm getting:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Posts`.

And this is my code in the related file:

import React from 'react';
import './Posts.css'

class Posts extends React.Component {
    constructor() {
        super()
        this.state = {
            posts: []
        }
        console.log("from constructor");
    }

    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/posts/')
            .then(response => response.json())
            .then(data => {
                this.setState({
                    posts: data
                })
            })
    }

    render() {
        return(
            <div className="Posts">
                {
                    this.state.posts.map(Post => {
                        return(
                            <Post title={Post.title} desc={Post.body}/>
                        )
                    })
                }
            </div>
        )
    }
}

export default Posts

Im currently working through an online course and this has stopped me in my tracks, any help would be greatly appreciated.

Upvotes: 0

Views: 35

Answers (1)

Tasos
Tasos

Reputation: 2045

You use the same variable for the map iterator value and the component name. Change it to this:

render() {
        return(
            <div className="Posts">
                {
                    this.state.posts.map(p => {
                        return(
                            <Post title={p.title} desc={p.body}/>
                        )
                    })
                }
            </div>
        )
    }

Upvotes: 1

Related Questions