title: Stateless functional component vs class based: why won't my props change?
body: <p>I have a dumb component that renders a link. I have a simple ternary checking if the prop, <code>props.filter</code> is the same as its <code>props.filterType</code>, then it will render a <code>&lt;span&gt;</code> instead of a <code>&lt;a&gt;</code> tag.</p>
  
  <p>This dumb component is being passed <code>filter</code> from a parent component, which is connected to a Redux store. </p>
  
  <p>The bug that I'm running into is this: my parent component does receive changes/updates to <code>filter</code>, I am console logging it and able to see that in the parent component <code>filter</code> does change.</p>
  
  <p>However in my dumb component, I am console.logging <code>props.filter</code>, which doesn't change at all. On the flip side, using the React dev tools and inspecting the component and checking its props, it DOES change. WHAT?!</p>
  
  <p>Changing the stateless functional component to a class does work. The <code>console.log(props.filter)</code> with the component as a class, does change. </p>
  
  <p>Here is the code for the component, both as a stateless functional and a class:</p>
  
  <pre><code>import React from 'react';
  
  import './styles.css';
  
  /* props.filter DOES CHANGE HERE */
  class FilterLink extends React.Component {
    render() {
      console.log('this.props.filter: ', this.props.filter);
      console.log('this.props.filterType: ', this.props.filterType);
      console.log(this.props.filter === this.props.filterType);
      return (
        this.props.filter === this.props.filterType ?
          &lt;span className='active-link'&gt;{this.props.children}&lt;/span&gt;
          :
          &lt;a id={this.props.filterType} className='link' href='' onClick={this.props.setFilter}&gt;
            {this.props.children}
          &lt;/a&gt;
      );
    }
  };
  
  /* props.filter DOESN'T CHANGE HERE */
  const FilterLink = props =&gt; ({
    render() {
      console.log('props.filter: ', props.filter);
      console.log('props.filterType: ', props.filterType);
      console.log(props.filter === props.filterType);
      return (
        props.filter === props.filterType ?
          &lt;span className='active-link'&gt;{props.children}&lt;/span&gt;
          :
          &lt;a id={props.filterType} className='link' href='' onClick={props.setFilter}&gt;
            {props.children}
          &lt;/a&gt;
      );
    },
  });
  
  export default FilterLink;
  </code></pre>
  
  <p>I think there is a huge hole in my understanding of stateless functional components. Any help or advice or direction would be greatly appreciated.</p>
  
  <p>Thank you,</p>