React setState of array of objects

Question

I have an array of 10 objects (Lets call them "Blogs") which contain title, description and image-URL properties. I need to wrap each of the properties in HTML tags and export them all so they all load on a webpage together.

With my current code, I am only getting 1 of the objects in the current state loading on the page. How do I get all the objects in the same state?

class NewBlogs extends React.Component {
    constructor(props) {
        this.state = {
            title: [],
            description: [],
            image: [],
            loading: true
        };
    }
    componentDidMount() {
        axios.get('/new-blogs').then(data => {
            const blogs = data.data;
            var component = this;

                for(var i in blogs) {
                    component.setState({
                        title: blogs[i].title,
                        description: blogs[i].description,
                        image: blogs[i].image,
                        loading: false
                    });
                }
            })
            .catch(function(error) {
                console.log(error);
            });
        }
        render() {
            return (
                <div>
                    <h2>New Blogs:</h2>
                    <h3>{this.state.title}</h3>
                    <em>{this.state.description}</em>
                    <img src={this.state.image}></img>
                </div>
            );
        }
    }
    export default NewBlogs

Shawn K · Accepted Answer · 2017-04-26 10:51:46Z

6

I haven't run/test this but try something like this

The API call appears to return a list of objects. If so just set state once the xhr completes and set loading false once.

In the react render() is where you could iterate over your list. The easiest way to do that is with '.map()'. You then simply return react elements for each object in your list.

Also let's rename 'component' to 'list'

class NewBlogs extends React.Component {
    constructor(props) {
        this.state = {
            list: [],
            loading: true
        };
    }
    componentDidMount() {
        axios.get('/new-blogs').then(data => {
            // const blogs = data.data;
            // var component = this;
            this.setState({list: data.data, loading: false })
                // for(var i in blogs) {
                //     this.setState({
                //         title: blogs[i].title,
                //         description: blogs[i].description,
                //         image: blogs[i].image,
                //         loading: false
                //     });
                // }
            })
            .catch(function(error) {
                console.log(error);
            });
        }
        render() {
            return (
                <div>
                    {this.state.list.map(e => (
                        <h2>New Blogs:</h2>
                        <h3>{e.title}</h3>
                        <em>{e.description}</em>
                        <img src={e.image}></img>
                    ))}
                    
                </div>
            );
        }
    }
    export default NewBlogs

edited Apr 26, 2017 at 10:51

answered Apr 24, 2017 at 22:46

Shawn K

7785 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick Over a year ago

Thanks. This has put me in the right direction I was looking for. I'm getting an error: "TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>)". I will keep playing with the code and debug tomorrow. When I get it I will mark as correct.

Collectives™ on Stack Overflow

React setState of array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related