How to change property of object in array javascript (React Native)

Question

I have some problems about array in my project but don't know how to fix

My array look like :

const [array, setArray] = useState([
    { id: 1, name: 'Luca', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
    { id: 2, name: 'Jin', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
])

 < FlatList
data = { array }
renderItem = {({ item, index }) => {
    return (
        <View>
            <FlatList
                data={item.classes}
                renderItem={({ item, index }) => {
                    return (
                        <View >
                            <TextInput
                                placeholder={''}
                                onChangeText={(text) => onChangeClassName(item, text)}
                                value={item.className}
                            />
                        </View>
                    )
                }}
            ></FlatList>
        </View>
    )
}}
></FlatList >

onChangeClassName

 onChangeClassName = (item, text) => {
        const newArr = arr
        for (let i = 0; i < newArr.length; i++) {
            for (let z = 0; z < newArr[i].classes.length; z++) {
                if (newArr[i].classes[z] === item ) {
                    newArr[i].classes[z].className = text
                   } }]
                }
            }
        }
        setArray([...arr])
    }

So each student has name and classes, classes of each student is different and i change it by using textInput. My problem is when i set className for one of students , both className in same position of students changed

ex: Clicked in classes[0] of Luca -> set text = '7A'

array will changed like this.

const [array, setArray] = useState([
    { id: 1, name: 'Luca', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
    { id: 2, name: 'Jin', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
])

Any one have solution ? Pls help me

Change you naming conventions firstly, you outer loop also has item and inner loop also has an item, you need to differentiate it. If it still doesnt work, problem might be something else. I am talking about the looping in your Components — Abhishek Kulkarni
– Abhishek Kulkarni, Commented Apr 10, 2020 at 5:43
Simplest way is to get the index of the ...row from flat list ...then pass it to the method where you want to change the text...then find the element using index from the array and change it ... this will be the fast way....using loop will make issue in large data set — Pramod
– Pramod, Commented Apr 10, 2020 at 5:48
@AbhishekKulkarni thanks for your comment but naming conventions not problem . It's still work perfectly but i'll change name clearly . i think problem when i set className is text — Zem Zem
– Zem Zem, Commented Apr 10, 2020 at 6:00
@Pramod yes i don't want using loop at all . but i don't know how to do it in another way ... — Zem Zem
– Zem Zem, Commented Apr 10, 2020 at 6:01

Goskula Jayachandra · Accepted Answer · 2020-04-11 07:02:33Z

1

Change your code to this it will work:

import React, {useState} from 'react';
import {View,StyleSheet,Image,Button, FlatList, Text, TextInput} from 'react-native';



export default function App(){
    const [array, setArray] = useState([
        { id: 1, name: 'Luca', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
        { id: 2, name: 'Jin', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
    ])
  const onChangeClassName = ( text,item1,itemID) => {
    let newArr = [...array];
 console.log("text is",text,item1,itemID);
               for(var i=0;i<array.length;i++){

                   if(array[i].name == item1)
                   {
                    for(var j=0;j<array[i].classes.length;j++){
                        if(array[i].classes[j].id == itemID)
                        {
                           newArr[i].classes[j].className = text;
                        }
                    }
                   }
               }
               setArray(newArr);
               console.log("array is",array);
        }


  return(
    <View style={styles.div}>
      <FlatList
        data={array}
        renderItem={({ item,index }) => {
        let item1 = item.name
    return(
        <View>
        <Text>{item.name}</Text>
        <FlatList
        data={item.classes}
        renderItem={({ item }) => 

        { let itemID = item.id;
        return(
            <TextInput style={{ width:"85%",height: 30, borderColor: "black", borderBottomWidth: 2}}
            placeholder="enter something"
            onChangeText={(text) => onChangeClassName( text,item1,itemID)}
            value={item.className}
        />
        )
        }}
        keyExtractor={item => item.id}
      />
        </View>
    )
    } }
        keyExtractor={item => item.id}
      />
    </View>
  );

}
const styles = StyleSheet.create({
  div: {
    flex:1,
    marginLeft:20,
    backgroundColor: 'white',
    marginTop:"30%"
  },


});

After entering some input in TextInput

My array looks like this after entering some values:

const [array, setArray] = useState([
    { id: 1, name: 'Luca', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '7B', teacherName: '' }] },
    { id: 2, name: 'Jin', classes: [{ id: 1, className: '8A', teacherName: '' }, { id: 2, className: '8B', teacherName: '' }] },
])

Hope this helps!

edited Apr 11, 2020 at 7:02

answered Apr 10, 2020 at 5:53

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

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

5 Comments

Zem Zem Over a year ago

tks for your answer , any way i tried get row of array and compare with newArr[i] . when i console.log just only one case success . so I think i've trouble when i set newArr[i].classes[z].className = text . But i don't know how to fix ... :(

Goskula Jayachandra Over a year ago

I had edited my answer by which you can change the text by using index check this one once

Zem Zem Over a year ago

same issue bro :( , i think i mistake is use FlatList inside FlatList

Goskula Jayachandra Over a year ago

No you can use FlatList inside FlatList I had worked on your code, here iam writing a working example check that once.

Zem Zem Over a year ago

tkank you , i fixed my problem . my problem is array i got from another screen , not about textinput .

Collectives™ on Stack Overflow

How to change property of object in array javascript (React Native)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related