Updating data on an index of a array javascript and react native

Question

In my Todo App i have sucessfully implemented the add and delete functions but the update function is having trouble. What i need it to do is when i click the touchable opacity of a Todo, it should appear in my inputbox and if any change is made then that todo should be updated e.g clicking on abcd must make it appear in input box and changes made to it should be updated. Picture is also added below

export default function Todo() {
  const [getText, setText] = useState('');
  const [getList, setList] = useState([]);

  const addItem = () => {
       setList([...getList, {key: Math.random().toString(), data: getText}]);
       setText('');
    }

  const removeItem = (itemKey) => {  
    setList(() => getList.filter(item => item.key != itemKey));
  }

  const updateFieldChanged = (index) => e => {
    let newArr = [...getList]; // copying the old datas array
    newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to
    setList(newArr);
}

  return (
    <View style={styles.container}>
      <Text style={styles.title}>todo</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Enter Item"
          onChangeText={text => setText(text)}
          value={getText}
        />
        <CustomButton     
          text = 'add'
          color='red'
          title= 'add'
          textSize={20}
          textColor="white"
          onPressEvent={addItem}

        />
      </View>

      <ScrollView style={styles.scrollview}>
        {getList.map((item, id) =>
          <TouchableOpacity
            key={item.key}
            activeOpacity={0.7}
            onPress= {() => updateFieldChanged(id)}


          >
            <View style={styles.scrollviewItem}>
              <Text style={styles.scrollviewText}>{id}) {item.data}</Text>
                <TouchableOpacity
                  onPress={() => removeItem(item.key)}
              >
                <View style={styles.crosstextcontainer}>
                  <Text style={styles.crosstext}>X</Text>
                </View>
              </TouchableOpacity>


            </View>
          </TouchableOpacity>
        )}
      </ScrollView>
    </View>
  );
}

From where you updating your value where you are getting event e from it can be done only on TextInput — Goskula Jayachandra
– Goskula Jayachandra, Commented May 1, 2020 at 19:28
Your function will never be called here as you need to pass two arguments in it — Goskula Jayachandra
– Goskula Jayachandra, Commented May 1, 2020 at 19:30

Goskula Jayachandra · Accepted Answer · 2020-05-01 19:42:44Z

1

Change

  <TouchableOpacity
            key={item.key}
            activeOpacity={0.7}
            onPress= {() => updateFieldChanged(id)}
          >

to

  <TouchableOpacity
              key={item.key}
              activeOpacity={0.7}
              onPress= {() => updateFieldChanged(id,getText)}
            >

Here iam passing the text that you need to enter to update a particular field

change your updateFieldChanged like this:

  const updateFieldChanged = (index, text) => {
      let newArr = [...getList]; // copying the old datas array
      newArr[index].data = text; // replace e.target.value with whatever you want to change it to
      setList(newArr);
      setText('');
  }

Here iam assigning the text you entered in the TextInput to the data object, which will update the array.

Hope this helps!

answered May 1, 2020 at 19:42

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

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

2 Comments

Moeez Atlas Over a year ago

snack.expo.io/p0eRVGwOK here is my snack link if u could take a look

Goskula Jayachandra Over a year ago

It's because of the odd behaviour of TouchableOpacity, just add this line to your scroll view keyboardShouldPersistTaps={'handled'} check this snack.expo.io/lSeCtL1Rx

Collectives™ on Stack Overflow

Updating data on an index of a array javascript and react native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related