objects in array with reactjs

Question

i got this error while building an app index.js:1375 Warning: Each child in a list should have a unique "key" prop. in App (at src/index.js:7) this the response from the api , i have this problem also i cant render the array as list properly

(15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

here is my code

import React, { Component } from 'react'
import ImagesSearch from './ImagesSearch'
import axios from 'axios'

export class Images extends Component {
    constructor(props) {
        super(props);
        this.state = {
          data: [],
          searchquery: '',
        };
        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(e) {
        this.setState({searchquery:e.target.value})
    }

    onSubmit(e) {
        e.preventDefault()
        this.images(this.state.searchquery)
        console.log(this.state.searchquery)
    }

    images(query) {
        return axios.get(`https://api.pexels.com/v1/search? 
            query=${query}+query&per_page=15&page=1`, {
              headers: { Authorization: `` }
            }).then(res => {
               console.log(res.data.photos)
               this.setState(prevState => ({
                   data: [res.data.photos]
               }))
               console.log(this.state.data)
               return res.data
            }).catch(err => {
                console.log(err)
            })
    }

    render() {
        const mapRows = this.state.data.map((item) => (
            <div key={item.id}>
                <li>
                    <span>Name : {item.url}</span>
                    <span>User Type: {item.url}</span>
                 </li>
            </div>))

        return (
            <div>
                <form class="form-group m-2" onSubmit={this.onSubmit}>
                   <label>Search</label>
                   <input class="form-control form-control-sm w-25 mx-auto" name="searchquery" type="text" placeholder="Search" onChange={this.onChange}  />
                   <button type="submit" class="btn btn-primary mt-2">Submit</button>
                </form>
            <div>
            { mapRows }
            <div>
            </div>
        )
    }
}

export default Images

thank you for your help

Your setState phase is wrong and that's why you can't render. I updated my answer. Please check my answer what you did wrong. — Allen Haley
– Allen Haley, Commented Nov 15, 2019 at 19:30

Allen Haley · Accepted Answer · 2019-11-15 19:29:13Z

3

Your setState phase is wrong with [res.data.photos]. res.data.photos is array value but you also set it as array again. So, the state value will be like this:

data: [[{...}, {...}, ..., {...}]]

You should use res.data.photos instead of [res.data.photos].

images(query) {
    ...
           this.setState(prevState => ({
               data: res.data.photos  // your code was [res.data.photos]
           }))
    ...
}

Also, you can use index instead of id if id is duplicated. Try with the following to avoid Warning.

const mapRows = this.state.data.map((item, index) => (
  <div key={index}>
    <li>
        <span>Name : {item.url}</span>
        <span>User Type: {item.url}</span>
     </li>
  </div>
));

edited Nov 15, 2019 at 19:29

answered Nov 15, 2019 at 19:22

Allen Haley

6576 silver badges21 bronze badges

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

Comments

Samuel Goldenbaum · Accepted Answer · 2019-11-15 19:13:28Z

1

Sound like you array has duplicate id values or the id property is missing from the objects in your array.

const mapRows = this.state.data.map((item) => (
                <div key={item.id}> // possible duplicate here
                    <li>
                        <span>Name : {item.url}</span>
                        <span>User Type: {item.url}</span>
                     </li>
                </div>))

answered Nov 15, 2019 at 19:13

Samuel Goldenbaum

19k20 gold badges74 silver badges112 bronze badges

Collectives™ on Stack Overflow

objects in array with reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related