ReactJS: Remove item from list without ID?

Question

I have an issue I can't seem to crack even after checking out a few other posts on here and trying a few things out. I am playing around with React and making a quick todo list. Easy enough as I can add new names and display them on the page as intended. I want to be able to delete items that I choose and for that I was looking around and saw others doing something like this to delete items:

deleteName(id, e) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name.id !== id)
    });
}

That made sense to me but I wasn't adding any id's to my <li> items so I thought I could just do:

this.setState({
   names: names.filter(name => name !== name)
});

But this will just delete the whole list. What am I doing wrong? Should I restructure how I add names to the array to have an id and check that? I'll post the full component code below. Any help I can get is always appreciated. Thanks guys.

class ContactListPage extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.state = {
        names: []
      };

      this.addName = this.addName.bind(this);
      this.deleteName = this.deleteName.bind(this);
    }

  addName(name) {
    const { names } = this.state;

    if (name === '') {
        console.log('add a name first!')
    } else {
        this.setState({
          names: names.concat(name)
        });
    }
  }

  deleteName(id, e) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name !== name)
    });
  }

  render() {
    const { names } = this.state;

    const named = names.map((name, i) => (
        <Card key={i} className='todo-list'>
            <CardText>
              <li>{name}    
                <FloatingActionButton className='fab-delete' mini onClick={this.deleteName}>
                           <i className="material-icons fab-icon-delete" style={{color: 'white'}}>-</i>
                        </FloatingActionButton>
              </li>
            </CardText>
        </Card>
    ));

    return (
        <div className='contact-list'>
          <div className="field-line">
            <NewName addName={this.addName} />
            <ul className='new-name'>
              {named}
            </ul>
          </div>
        </div>
    );
  }
}

What does this have to do with "Objects are not valid as a React child"? — Oliver Charlesworth, May 23 '17 at 23:04
Oh wow I apologize @OliverCharlesworth. I was getting that error when I tried to concat an array of objects to my names array. Ex: `names: names.concat([{ name: name }]). — justDan, May 23 '17 at 23:09
Can you confirm the data type of `names`. Is it just an array of strings? — fubar, May 23 '17 at 23:11
Maybe your question is similar to one I asked before https://stackoverflow.com/questions/41436251/how-to-filter-through-array-of-components-elements-in-reactjs — A. L, May 23 '17 at 23:11
@fubar It is indeed just an array of strings. When I tried to add objects to the names array, that's when I get the error `Objects are not valid as a React child`. A. Lau thank you for that link! That looks like it could help me out here. — justDan, May 23 '17 at 23:13

score 3 · Answer 1 · answered May 23 '17 at 23:18

You're comparing each name with itself, that will yield an empty list regardless of what's in it (except I guess NaN?).

names.filter(name => name !== name)

I think you want to pass the name into your delete function from the view. It's been a while since I've done React, but you could probably do this with a lambda in the JSX.

deleteName(nameToDelete) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name !== nameToDelete)
    });
}

render() {
    // Simplified to focus on the onClick change
    return names.map(name => <Card>
        ...
        <FloatingActionButton onClick={(e) => this.deleteName(name)} ... />
        ...
    </Card>);
}

If you need to worry about duplicate names, then you can pass the current index into deleteName() rather than the string itself. Up to you if that's necessary or not.

With this when I load the page I get: `app.js:317 Uncaught Error: ContactListPage.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.`. I'll look further into this response though. Thank you. — justDan, May 23 '17 at 23:27

fubar · Accepted Answer · 2017-05-23T23:47:14.277

2

It's hard to tell, but are you referencing name when the passed argument to your callback is actually called id?

Try this:

deleteName(name) {
    this.setState((prevState) => ({
        names: prevState.names.filter(_name => name !== _name);
    }));
}

And change the following:

onClick={this.deleteName.bind(null, name)}

edited May 23 '17 at 23:47

answered May 23 '17 at 23:14

fubar

16,918
4
37
43

Thanks for the response! I tried this and nothing seems to happen. No deletions and no errors in console or anything. I think I just need to trash what I have and start all over again. – justDan May 23 '17 at 23:30
In your `deleteName` event handler, can you `console.log(arguments)` and post the output? – fubar May 23 '17 at 23:33
Ok so if I console.log both e and name from your code, I get this: e - `Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, isDefaultPrevented: function, isPropagationStopped: function, _dispatchListeners: function…}` and for name it gives me `undefinded`. So the undefined looks like my issue here. – justDan May 23 '17 at 23:36
1

You're not passing `name` to your click handler. See my edit. – fubar May 23 '17 at 23:37
Ok so now I can log the right name but it still deletes all the names! – justDan May 23 '17 at 23:42
Can you post what's logged from `console.log(arguments)` again? I want to check if it's the first or second argument provided to the function. – fubar May 23 '17 at 23:43
You got it. So if I add my name Dan and hit the delete button, for e I get `Dan` and for name I get `[object Object]`. – justDan May 23 '17 at 23:46
Awesome. Revised answer once more. Hopefully that should do it. – fubar May 23 '17 at 23:47
I owe you a beer my friend! You got it. I can't thank you enough. Question though. Is this an alright way to add and remove items from a list, or is it best to add objects and look for id's? Either way thank you so much! – justDan May 23 '17 at 23:50
2

You're welcome. There's nothing inherently wrong with it. You will run into problems when you have two items with the same name, so using an object with a unique ID would solve that. – fubar May 23 '17 at 23:52
Ah yes good point on the duplicate names. I'll look into adding objects to the array next. Thanks again, man. I just learned a few new things today. – justDan May 23 '17 at 23:54

score 0 · Answer 3 · answered May 23 '17 at 23:18

In the callback for the filter, name !== name will always be false since an object is identical to itself. i.e name === name. Therefore the expression names.filter(name => name !== name) will return an empty array and erase your results. You can change your onClick handler to something like this to pass in your id: onClick={(e) => this.deleteName(i, e)} and then use names.filter((name, i) => i !== id) to 'delete' the name, although I imagine you would would probably want to make a copy of the names array and then splice the corresponding name out of it.

ReactJS: Remove item from list without ID?

3 Answers3