How to delete item from an array by onPress event in react

Question

I'am making a todo app. I want to call a function on a button Press event and want to pass item id to it.

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

export default function App() {
  const  [goal,setgoal] = useState('');
  const [addInput, setInput] = useState([]);

  const changetext= ()=>{    
    setInput(addInput=>[...addInput,{id: Math.random().toString(), value: goal}]);   

  };
  const texthandler= (enteredText)=>{
    setgoal(enteredText);
  };
  const deleteText = (e)=>{
    setInput((addInput)=>addInput.filter(todo=>todo.id !=e.target.id))   
                          }

  return (
    <View style={styles.screen} >
      <View style={styles.InputView}>
        <TextInput placeholder="Course Goal"  onChangeText={texthandler} value={goal}
        style={styles.TextInputStyle}/>
        <Button title='ADD' onPress={changetext}/>
      </View>     

     <FlatList data={addInput} keyExtractor={(item,index)=>item.id} renderItem={
                                  (itemData)=>(
                                  <View style={styles.recordList}>
                                  <Text style={styles.Textoutput} id={itemData.item.id} onPress={deleteText}>{itemData.item.value}</Text>
                                  <Button title="Delete" style={styles.DeleteButton}  value={itemData} onPress={deleteText} ></Button>
                                  </View>)}/> 
</View>


  );
}

here i want Delete button to remove respective element from 'addInput' list. same thing is happening by pressing Text field itself. but here i can pass id from text field but not from button. why so? how to get it done by using button. also, should i use 'this' keyword? can we do it without it, because some time it looks confusing to me at initial stage. thanks in advance

user13142973 · Accepted Answer · 2020-05-16 09:45:12Z

2

Try this:

  const deleteText = (itemID)=>{
    setInput(()=>addInput.filter(todo=>todo.id !=itemID))   
 }

  return (
    <View style={{marginTop:30}}> 
      <View>
        <TextInput placeholder="Course Goal"  onChangeText={texthandler} value={goal}/>
        <Button title='ADD' onPress={changetext}/>
      </View>     

     <FlatList data={addInput} keyExtractor={(item,index)=>item.id} renderItem={
                                  (itemData)=>(
                                  <View>
                                  <Text id={itemData.item.id} onPress={()=>deleteText(itemData.item.id)} >{itemData.item.value}</Text>
                                  <Button title="Delete"  value={itemData} onPress={()=>deleteText(itemData.item.id)} ></Button>
                                  </View>)}/> 
</View>

answered May 16, 2020 at 9:45

user13142973

6451 gold badge6 silver badges11 bronze badges

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

Comments

Somethingwhatever · Accepted Answer · 2020-05-09 20:31:25Z

0

Well i am not sure about the answer in terms of React-native but in React i would try something like this:-

onPress= { this.deleteText.bind(this,idx) }

If you are not passing this function as a prop, simply remove bind and call it using this.deleteText(idx)

answered May 9, 2020 at 20:31

Somethingwhatever

1,3886 gold badges39 silver badges85 bronze badges

Comments

Ravi Singh · Accepted Answer · 2020-05-09 20:42:33Z

0

In react/react-native, you can make a event handler method and can handle array items for example like this:

  handleOnPress = value => {
    let {mArray} = this.state
    if(mArray.includes(value)){
      let index = mArray.findIndex((item => item==value))
      mArray.splice(index, 1)
    }else mArray.push(value)
    this.setState({mArray})
  }

In Your case, have to just delete item from the array so you can just use splice method. for example:

  handleOnDelete = item => {
    let {mArray} = this.state;
    let index = mArray.findIndex((item => item==value))
    if(index > -1) mArray.splice(index, 1)
    else console.log('item not found')
  }

answered May 9, 2020 at 20:42

Ravi Singh

1,1391 gold badge12 silver badges25 bronze badges

Comments

Dionys · Accepted Answer · 2020-05-10 17:24:01Z

0

const deleteText = e => setInput(
  addInput => addInput.split(addInput.findIndex(todo => todo.id == e.target.id), 1)
)

edited May 10, 2020 at 17:24

Dionys

3,1431 gold badge21 silver badges29 bronze badges

answered May 9, 2020 at 20:28

Ali Hayder

3251 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to delete item from an array by onPress event in react

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related