Error remove form with button click in React-Native

Question

i'm new in React-Native. and i want to remove form with button click. but, if i add more than one form and i click remove form with last button remove, then all form remove. whereas, i want if i click button remove in last form, then just last form will remove.

this is my code

class.....{
 constructor(props) {
    super(props);
    this.state = {
      showMaterial: [],
    };
    this.onAddBtnClick = this.onAddBtnClick.bind(this);
  }
 render(){
  return(
   <Icon name='add' onPress={() => this.onAddBtnClick()}/>

    {this.state.showMaterial.map((input, index)=>{
      return input;   
      })
    }
  );
 }

 onAddBtnClick(event) {
    const showMaterial = this.state.showMaterial;
        this.setState({
            showMaterial: showMaterial.concat(
                <List key={showMaterial.length}>
                  <ListItem>
                      <Text >Description</Text>
                      <Icon name='remove' onPress={() => this.onRemove()}/>
                      <Input style={{height: 30}} placeholderTextColor='lightgray' placeholder="Description" multiline={true} onChangeText={(description) => this.setState({description})}/>

                  </ListItem>
              </List>
              )
        });
  }

  onRemove(){
    this.setState({
      showMaterial:this.state.showMaterial.filter((e, i) => !this.state.showMaterial)
    })
  }

}

Answer 1

You can try passing the id of the list to remove method

onAddBtnClick(event) {
    const showMaterial = this.state.showMaterial;
        this.setState({
            showMaterial: showMaterial.concat(
                <List key={showMaterial.length}>
                  <ListItem>
                      <Text >Description</Text>
                      <Icon name='remove' onPress={() => this.onRemove(showMaterial.length-1)}/>
                      <Input style={{height: 30}} placeholderTextColor='lightgray' placeholder="Description" multiline={true} onChangeText={(description) => this.setState({description})}/>

                  </ListItem>
              </List>
              )
        });
  }

  onRemove(idx){
    this.setState({
      showMaterial:this.state.showMaterial.splice(idx,1)
    })
  }