title: Javascript array map function keeps records of previous items of array
body: <p><strong><em>update</em></strong> Ok, so I've noticed that even though in <code>isCategoryActive()</code> function I'm mutating only the variable <code>newCategories</code> that was assigned a value from <code>this.props.searchCategories</code> the <code>searchCategories</code> prop changes value as well, therefore passing it to the consecutive array item's invocation of the <code>isCategoryActive</code> function. Why is it happening though??<strong><em>update</em></strong></p>
  
  <p>I'm building a blog's frontend in React based on Wordpress REST API and I'm having problems creating links to filter posts categories after checking if they are already filtered. The problem I'm having is that even though I wrote a pure function <code>isCategoryActive</code> inside the map function every consecutive category link url has every preceding category id in it. I would have thought that on every invocation of a pure function I would receive a clean result, but in my case it isn't like that. At the moment the wordpress stores 3 categories:
  "uncategorized" with id: 1,
  "javascript" with id: 4,
  "third category" with id: 10</p>
  
  <p>What I'm trying to get the console.log(newCategories, url) function inside the render() function to log:</p>
  
  <p>[1] blog?categories=1<br>
  [4] blog?categories=4<br>
  [10] blog?categories=10</p>
  
  <p>But at the moment it logs:</p>
  
  <p>[1] blog?categories=1<br>
  [1,4] blog?categories=1,4<br>
  [1,4,10] blog?categories=1,4,10</p>
  
  <p>I have no idea why it's keeping the record of the previous categories ids.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>// import dependencies
  import React, { Component } from 'react'
  import { Link } from 'react-router-dom'
  import axios from 'axios'
  
  // import components
  import '../Styles/Css/PostsCategories.css'
  
  import { createSearchUrl } from './SharedModules'
  
  class PostsCategories extends Component {
    constructor() {
      super()
      this.state = {
        categories: null,
        loading: false
      }
    }
  
    componentDidMount() {
      this.setState({
        loading: true
      })
      axios.get(`http://localhost/wordpress-api/wp-json/wp/v2/categories`)
        .then(res =&gt; {
          this.setState({
            categories: res.data,
            loading: false
          })
        })
    }
  
    isCategoryActive = (category) =&gt; {
      let newCategories = this.props.searchCategories
      newCategories.indexOf(category) === -1
      ? newCategories.push(category)
      : newCategories.splice(newCategories.indexOf(category),1)
      return newCategories
    }
  
    render() {
      if (this.state.loading || !this.state.categories) return &lt;div className='posts-categories'&gt;&lt;h2 className='loading'&gt;Loading ...&lt;/h2&gt;&lt;/div&gt;
  
      const categories = this.state.categories.map(category =&gt; {
        const newCategories = this.isCategoryActive(category.id)
        const url = createSearchUrl('/blog', newCategories, this.props.searchString)
        console.log(newCategories, url)
        return (
          &lt;Link
            to={url}
            onClick={this.props.searchCategoryChange.bind(this, category.id)}
            className='posts-category'
            key={category.id} &gt;
              {category.name}
          &lt;/Link&gt;
        )})
  
      return (
        &lt;div className='posts-categories'&gt;
          {categories}
        &lt;/div&gt;
      )
    }
  }
  
  export default PostsCategories
  </code></pre>