Reactjs -Each child in an array or iterator should have a unique "key" prop

Question

import React from 'react';
import {Jumbotron} from 'react-bootstrap';
import axios from 'axios';
import './App.css'

export default class Form extends React.Component{

state={
    user:[],
    firstname:'',
    lastname:'',
}
handleChange = event => {
    this.setState({firstname:event.target.value});
    this.setState({lastname:event.target.value});
}

handleSubmit = event =>{
    event.preventDefault();

    axios.post('http://9795ca45.ngrok.io/api/Docs',{
        fname:this.state.firstname,
        lname:this.state.lastname
    })
    .then( res => {
        console.log(res);
        console.log(res.data);
    })
    .catch((error) =>{
        alert(error);
    })
}

componentDidMount(){
    axios.get('http://9795ca45.ngrok.io/api/Docs')
    .then(res =>{
        const data=res.data;

        const user = data.data;

        this.setState({user});
    })
    .catch((error) =>{
        alert(error);
    })
}

render(){
    return(
        <div>
            <Jumbotron>
                <form onSubmit={this.handleSubmit}>
                <label>
                    firstName:
                    <input type="text" name="firstname" onChange={this.handleChange} />
                    </label>
                <label>
                    LastName:
                    <input type="text" name="lastname" onChange={this.handleChange} />
                    </label>
                    <button type="submit">add</button>
                    </form>
            
                <h1> names </h1>
                <ul> {this.state.user.map(person => <li> {person.lname}</li>)}</ul>
                </Jumbotron>
                </div>
    )
}
}

am very new to reatjs am trying to post the data to the url but am getting request not found 500 error and i see this using debugger

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Form.

please help me to come away from this

am getting the data from the url but i unable to post the data

please check it and correct my code with an explanation

am getting an error after clicking the button.. while trying to post.. — , Mar 22 '18 at 10:03
previous question is to ask about get the data.. this time am facing the problem while posting the data. — , Mar 22 '18 at 10:03
previous question is solved .. whenever am trying to post only am geting request status failed 500 error — , Mar 22 '18 at 10:06
You are answering "previous question" when I am asking you what you mean by "previous question"... Do you mean your post has been answered? In that case post a new question please. — Chris, Mar 22 '18 at 10:09
yes previous question is answered.. this is a new question but in the same program.. the question i was unable to post the data, am getting request not found 500 error — , Mar 22 '18 at 10:11
Alright, but your title is about unique key prop. What you have here is not relevant to that error. So please either modify your original question or post a new one. — Chris, Mar 22 '18 at 10:14

score 4 · Answer 1 · answered Mar 22 '18 at 10:02

4

As written here:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

You need to add a key to the list you are rendering inside a map. you'r code should look like this:

<ul> {this.state.user.map(person => <li key={person.lname}> {person.lname}</li>)}</ul>

I would recommend setting the key as a unique ID and not the last name as it isn't unique for each person.

answered Mar 22 '18 at 10:02

Matan Bobi

2,693
1
15
27

better to use the index as the key to guarantee uniqueness in that case. – Chris Mar 22 '18 at 10:05
this line is working and its fetching the data. – Mar 22 '18 at 10:07
i am facing the problem in posting the data.. request not found error is arising whenever i clicked the button – Mar 22 '18 at 10:07
@Chris as I read you shouldn't be using index in any case, am I wrong? – Matan Bobi Mar 22 '18 at 10:08
@SriHariKarthikVijayakumar this sounds like a different problem and not a one that relates to this issue. Check if the server really has an endpoint on post for the url you are sending you'r request to. – Matan Bobi Mar 22 '18 at 10:11
@MatanBobi, using indexes **can** be anti-pattern, but it depends on the use-case. Indexes guarantee uniqueness among keys (which avoids key collision) and is always better than using keys that *might* collide (like last name). The only time indexes as key is bad is when you rearrange the items in the array or add items to it (except when adding as last item aka push) – Chris Mar 22 '18 at 10:12

Reactjs -Each child in an array or iterator should have a unique "key" prop

1 Answers1