setting state within nested response

I am building a react app and I am setting the state with api of nested response of nested state But the state is not setting the way I want.

response that is receiving from api

[
    {
        "id": 70,
        "title": "feefifef",
        "images": [
            {
                "id": 28,
                "text": "First Image"
                "blog_id": 70,
            },
            {
                "id": 28,
                "text": "First Image",
                "blog_id": 70,
            }
        ]
    }
]

App.js

class App extends React.Component {
    constructor(props){
    super(props)

    this.state = {
        blogs = [
           {
            id: 0,
            title: "",
            images: [
                 {
                    id:0, 
                    text:""
                 }
               ]
            }
          ]
        }
    }

    componentDidMount() {
    let data;

    axios.get('http://127.0.0.1:8000/api/blogs/').then((res) => {
        data = res.data;
        this.setState({
            blogs: data.map((blog) => {
                return Object.assign({}, blog, {
                id: blog.id,
                title: blog.title,
                images: blog.images,
                }
                })
            })
        })
    }

    render() {

         const blogs = this.state.blogs.map((blog) => (
           <BlogList
              id={blog.id}
              title={blog.title}
              images={blog.images}
           />
        ))
    }

    return (
         <div>{blogs}</div>
    )

}


class BlogList extends React.Component {
    constructor(props){
        super(props)
    }


    return (
         <div>
            Title: {this.props.title}

            Images: {this.props.images}
         </div>
    )
}

What is the problem ?

Images are not showing after Title. I am trying to show all images in BlogList class of every blog.

I have also tried using (in BlogList class)

this.props.images.map((img) => {
    return (
        <div>
        Title: {this.props.title}

        Images: {img.text}
        </div>
    )
}

But it showed me

this.props.images.map is not a function.

then I think the problem is with setting state of images (I may be wrong).

When I tried to print this.props.images then it is showing

0: {id: 28, text: '1111', blog_id: 71}
length: 1
[[Prototype]]: Array(0)

I am new in react, Any help would be much Appreciated. Thank You in Advance

Answer

this.props.images is an array and hence you can’t use {this.props.images} directly. Other wise you will get an error like this “Objects are not valid as a React child. If you meant to render a collection of children, use an array instead”

You have to use something like this

render() {
    return (
      <div>
        Title: {this.props.title} <br/>
        Images:
        {this.props.images?.map((image, i) => (
          <div key={image.id}>
            {image.id}<br/>
            {image.text}<br/>
            {image.blog_id} <br/>
           </div>
        ))}
      </div>
    );
  }

Advertisement

Answer