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

Answer 1

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