Check if an item exist in array and remove that particular item from that array

Question

I have a component to display list of tags, and the user can select tags to follow them. So when the user clicks a tag, I would like to store it in the tagsSelectedList and add a new class name selected_tag. But if the the tag is already present in the tagsSelectedList, remove the tag from the tagsSelectedList and also remove the class name selected_tag.

I am confused as how to check if the tag object is present inside tagSelectedList and remove that specific tag item from the list. How do I do that? Your help and guidance will be much appreciated. Thank you.

component.js:

let tags = [
    {id: "1", tagName: "Arts"},
    ...
    ...
    {id: "59", tagName: "Writing"}
];
var tagsSelectedList = [];

export default class SignUpSubscribeTags extends React.Component {
    constructor(props){
        super(props);
    }
    selectTag = (e) => {

        // if the tag is not present in the tagsSelectedList then add the tag in the tagsSelectedList also add the tag_selected class name
        var isTagPresent = tagsSelectedList.filter(function(item) {
           return item.id === e.target.dataset.pk
        });

        if(isTagPresent) {
            console.log(e.target.dataset.pk, 'present in tagsSelectedList');
        }
        else {
            console.log(e.target.dataset.pk, 'not present in tagsSelectedList');
        }

        // if the tag is present in tagsSelectedList then remove the tag object from the tagsSelectedList also remove the tag_selected class name

    }

    render() {
        let tagList = tags.map((Tag) => {
            return (
                <li id={Tag.tagName} class="tag" data-pk={ Tag.id } key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
            );
        });

        return(
            <div id="signup-process-wrapper-addTags">

                <div id="add_tags">
                    <ul id="tag_list">
                        {tagList}
                    </ul>
                </div>
            </div>
        );
    }
}

do you use underscore.js/lodash.js in your project? – Alexey Jul 18 '16 at 09:34 — Alexey, Jul 18 '16 at 09:34
This might help: http://stackoverflow.com/a/2155786/3783478 – Rajesh Jul 18 '16 at 09:43 — Rajesh, Jul 18 '16 at 09:43

Arun Ghosh · Accepted Answer · 2016-07-18T13:54:51.747

1

You can check if taglist contains item by:

    if (e.target.className.indexOf("tag_selected") > -1) {}

or

    var isTagPresent = tagsSelectedList.filter(function(item) {
       return item.id === e.target.key
    });
    if(isTagPresent.length) {}

You can remove class by :

    e.target.className.replace("tag_selected", "");

You can remove item by

    tagsSelectedList = tagsSelectedList.filter(function(item) {
       return item.id !== e.target.key
    })

edited Jul 18 '16 at 13:54

answered Jul 18 '16 at 09:37

Arun Ghosh

7,634
1
26
38

there's a small typo on `e.targert` ;) – Vincent Taing Jul 18 '16 at 09:43
@VincentTaing Thank you :) – Arun Ghosh Jul 18 '16 at 09:56
I am getting `isTagPresent` to always true. I have changed the code a bit. Could you please check it. – Benjamin Smith Max Jul 18 '16 at 13:49
Aah! It was good that there was an error, which made me learn more. Thank you. Although, `e.target.className.replace("tag_selected", "");` was not working, and I had to do this `e.target.className="tag";`. Thanks again. – Benjamin Smith Max Jul 18 '16 at 14:11

score 0 · Answer 2 · answered Jul 18 '16 at 09:53

Since you are using React, why not create an expression that will add/remove class automatically.

Add a variable to state and based on value toggle class.

export default class SignUpSubscribeTags extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          isSelected: false
        }
    }

    selectTag = (e) => {
      this.setState({
        isSelected: !this.state.isSelected
      })
    }

    render() {
        let tagList = tags.map((Tag) => {
            return (
                <li 
                  id={Tag.tagName} 
                  class="tag" 
                  className={this.state.isSelected? ' tag_selected ' : null} 
                  key={Tag.id} 
                  onClick={this.selectTag}>
                  {Tag.tagName}
                </li>
            );
        });

        return(
            <div id="signup-process-wrapper-addTags">
                <div id="add_tags">
                    <ul id="tag_list">
                        {tagList}
                    </ul>

                </div>
            </div>
        );
    }
}

You didn't get me. I don't want to add `tag_selected` to all the tags, only to the clicked tags. With your implementation all the tags will be selected. — Benjamin Smith Max, Jul 18 '16 at 13:08
@Benjamin this is just a sample implementation. Since you are having a loop, you will have selected value for all `li`s and based on value of current flag, you will have to add class. Object of answer was to show that you can achieve in React itself and you do not need to get in JS to manually add classes. — Rajesh, Jul 18 '16 at 13:11

Check if an item exist in array and remove that particular item from that array

2 Answers2