When pushing objects to array, how to not push same object?

Question

I'm creating new array with objects checked in the checkbox. But when i submit again, there's a error "flattenChildren(...): Encountered two children with the same key, .$3. Child keys must be unique; when two children share a key, only the first child will be used." I want push only unique objects.

I`m using react

handleSubmit(){

    let students = []
    for(let idx in this.state.checked){
        if(this.state.checked[idx] ){
            students.push(this.state.allStudent[idx])
        }
    }
    console.log('students', students)
    this.setState({
        studentList: update(this.state.studentList, {$push: students})
    })

}

you don't need to be sorry for not knowing things. as for the question, just before u push to state .. do a find and if u find skip the push lik ... a Array.findIndex((i)=>{ return children.id === currentchild.id}) and u should be good to go — damitj07
– damitj07, Commented Sep 6, 2019 at 9:53
Consider using a Set instead of an Array : their add method is idempotent for a given parameter — Aaron
– Aaron, Commented Sep 6, 2019 at 9:54
Change students.push(this.state.allStudent[idx]) to !students.includes(this.state.allStudent[idx]) && students.push(this.state.allStudent[idx]) — ponury-kostek
– ponury-kostek, Commented Sep 6, 2019 at 9:55

brian3kb · Accepted Answer · 2019-09-06 10:04:20Z

3

As you are using React, you should be able to safely use the ES6 Set Object, which lets you store unique values of any type. (https://devdocs.io/javascript/global_objects/set).

e.g.

handleSubmit(){

let students = []
for(let idx in this.state.checked){
    if(this.state.checked[idx] ){
        students.push(this.state.allStudent[idx])
    }
}

students = [...new Set(students)];

console.log('students', students)
this.setState({
    studentList: update(this.state.studentList, {$push: students})
})

}

answered Sep 6, 2019 at 10:04

brian3kb

2912 silver badges4 bronze badges

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

Comments

user8558888 · Accepted Answer · 2019-09-06 10:31:45Z

1

I am not an expert in React.js, but this seems to be a simple problem(pushing only unique elements to a JS array). Your function modified as follows should work:

handleSubmit(){
    let students = [...this.state.studentList];
    for(let idx in this.state.checked){
        if(this.state.checked[idx] && (students.indexOf(this.state.checked[idx]) === -1)){
            students.push(this.state.allStudent[idx])
        }
    }
    console.log('students', students)
    this.setState({
        studentList: update(this.state.studentList, students)
    })
}

What we have essentially done here is use the 'indexOf()' method on the 'students' array to check if the current element exists in the array - the indexOf() method returns -1 if an element is not found in an array. Hope this helps!

edited Sep 6, 2019 at 10:31

answered Sep 6, 2019 at 10:00

user8558888

112 bronze badges

1 Comment

Baasandorj Over a year ago

Yeah that's totally what i'm thinking. But it still throws "flattenChildren(...): Encountered two children with the same key" error. I don't know why.

Collectives™ on Stack Overflow

When pushing objects to array, how to not push same object?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related