Remove element from array with onClick and react

Question

I'm very new to JS and React and coding in general. I'm trying to remove an item from an array using onClick, like so:

const { Component } = React;


class Board extends Component{
  constructor(props) {
    super(props);
    this.state = {
    comments: [
        'I like Rosie',
        'I like you',
        'I like bacon',
        'lalalala'
      ],
    }
  }

  removeComment = (e) =>{

    var filteredArray = this.state.comments.filter(item => item !== e.target.value)
    this.setState({comments: filteredArray});
    console.log(e.target.value)
  }

  eachComment = (text, i) => {
    return ( <p id={i} key={i} > comment: {text} {i}</p> )
  }

  render(){
     console.log('render');
    return (
      <div className="gif-list" onClick={this.removeComment}>
        {this.state.comments.map(this.eachComment)}
      </div>
    );
  }


}



ReactDOM.render(
  <Board/>,
  document.querySelector('#mount'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mount"><div>

Not much is happening though. My console.log(e.target.value) comes back as undefined. What am I doing wrong?

I have tried looking at other answers but implementing (to me) abstract solutions to other similar problems is not working for me.

Thanks in advance, and apologies for such a simple question.

a <div> doesn't have a value.

Dan O
– Dan O

2020-03-10 17:00:29 +00:00
Commented Mar 10, 2020 at 17:00 — Dan O
– Dan O, Commented Mar 10, 2020 at 17:00

Brian Thompson · Accepted Answer · 2020-03-10 17:06:13Z

2

The div you have the event handler on does not have a value attribute. But even if it did I don't think it will do what you want.

You'll need to change your code a bit in order to get it working like you want:

class Board extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
    comments: [
        'I like Rosie',
        'I like you',
        'I like bacon',
        'lalalala'
      ],
    }
  }

  removeComment = (e) =>{
    // Check the index in the filter to see if it should be kept or removed
    var filteredArray = this.state.comments.filter((item, i) => i != e.target.id)
    this.setState({comments: filteredArray});
    console.log(e.target.id)
  }

  eachComment = (text, i) => {
    // Move the event handler to be on each item
    return ( <p id={i} key={i}  onClick={this.removeComment}> comment: {text} {i}</p> )
  }

  render(){
    return (
      <div className="gif-list">
        {this.state.comments.map(this.eachComment)}
      </div>
    );

  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

You'll notice the important changes are:

Give the remove handler to each mapped element
Use an attribute from the event target that actually exists and can be used to determine which element should be removed.

edited Mar 10, 2020 at 17:06

answered Mar 10, 2020 at 17:01

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

3 Comments

Laurens de Vries Over a year ago

Thanks a bunch! This works :). I guess you don't need to have event handlers in the render function? As long as the state is changed render() is called anyway?

Brian Thompson Over a year ago

Updates to state will cause a re-render, yes. It doesn't matter where the state update originates from.

Laurens de Vries Over a year ago

Thanks again. I had not expected an answer this quickly!

Harmenx · Accepted Answer · 2020-03-10 16:59:21Z

0

For this one you need to specifically pass in the param when you bind the onClick function


    return (
      <div className="gif-list" onClick={(e)=>this.removeComment(e)}>
        {this.state.comments.map(this.eachComment)}
      </div>
    );

answered Mar 10, 2020 at 16:59

Harmenx

9461 gold badge5 silver badges13 bronze badges

1 Comment

Brian Thompson Over a year ago

onClick={(e)=>this.removeComment(e)} is effectively the same as onClick={this.removeComment}. The only difference is the first method creates a new anonymous function every render (slightly less efficient).

Collectives™ on Stack Overflow

Remove element from array with onClick and react

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related