javascript - How to filter through array of components/elements in reactjs

Question

So I can get the button through the event when it is clicked on. But when I do a filter, it does not remove the said button.

So I have my array in the constructor():

constructor()
{   
    super();
    this.options = [ 1, 2, 3, 4, 5]; 
    this.temp_option = []; 
    this.delete_me = this.delete_me.bind(this);
    this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>];
    this.state = { buttons: this.buttons };
}

then I have the function:

delete_me(e)
{   
    console.log(e.target);
    this.buttons = this.buttons.filter((item) => item != e.target);
    console.log(this.buttons);
}

However this.buttons still has two elements in it.

I thought about another way to delete it and it was to use the 'key', but I can't seem to find anything about getting key value.

Answer 1

The approach you are currently taking isn't really "react". You need to think more about a change in state rather than altering the dom directly.

One approach would be:

class App extends React.Component {
  constructor(){
    super();
    this.state ={
      visibleButtons: [ 11, 22, 33, 44 ],
      buttons: {
        11: {
          label: "Foo",
        },
        22: {
          label: "Bar"
        },
        33: {
          label: "Cow",
        },
        44: {
          label: "Pig"
        },        
      },
    }
  }

  onDelete(deletedId) {
    this.setState({
       visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId)
    });
  }

  render () {                                        
    return (
      <div>
        { this.state.visibleButtons.map(buttonId => (
          <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button>
        )) }   
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('root'));

http://codepen.io/cjke/pen/RKwWwZ?editors=0010

---

Edit

An example showing adding and removing. The unique id is pretty primitive, and doesn't actively check for what is there, but you should get the gist:

class App extends React.Component {
  constructor(){
    super();
    this.onAdd = this.onAdd.bind(this);
    this.onChange = this.onChange.bind(this);

    this.state ={
      value: '',
      uniqueId: 100,
      visibleButtons: [ 11, 22, 33, 44 ],
      buttons: {
        11: {
          label: "Foo",
        },
        22: {
          label: "Bar"
        },
        33: {
          label: "Cow",
        },
        44: {
          label: "Pig"
        },        
      },
    }
  }

  onDelete(deletedId) {
    this.setState({
       visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId)
    });
  }

  onChange(e) {
    this.setState({ value: e.target.value });
  }

  onAdd(e) {
    this.setState({
      uniqueId: this.state.uniqueId + 1,
      value: '',
      buttons: {
        ...this.state.buttons, 
        [this.state.uniqueId]: { 
          label: this.state.value,
        }
      },
      visibleButtons: [...this.state.visibleButtons, this.state.uniqueId],
    });
  }

  render () {                                        
    return (
      <div>
        <div>
        { this.state.visibleButtons.map(buttonId => (
          <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button>
        )) } 
        </div>
        <br/>
        <div>
          <input onChange={this.onChange} value={this.state.value}/><button onClick={this.onAdd}>+</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('root'));