Stateless functional component vs class based: why won't my props change?

Question

I have a dumb component that renders a link. I have a simple ternary checking if the prop, props.filter is the same as its props.filterType, then it will render a <span> instead of a <a> tag.

This dumb component is being passed filter from a parent component, which is connected to a Redux store.

The bug that I'm running into is this: my parent component does receive changes/updates to filter, I am console logging it and able to see that in the parent component filter does change.

However in my dumb component, I am console.logging props.filter, 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?!

Changing the stateless functional component to a class does work. The console.log(props.filter) with the component as a class, does change.

Here is the code for the component, both as a stateless functional and a class:

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 ?
        <span className='active-link'>{this.props.children}</span>
        :
        <a id={this.props.filterType} className='link' href='' onClick={this.props.setFilter}>
          {this.props.children}
        </a>
    );
  }
};

/* props.filter DOESN'T CHANGE HERE */
const FilterLink = props => ({
  render() {
    console.log('props.filter: ', props.filter);
    console.log('props.filterType: ', props.filterType);
    console.log(props.filter === props.filterType);
    return (
      props.filter === props.filterType ?
        <span className='active-link'>{props.children}</span>
        :
        <a id={props.filterType} className='link' href='' onClick={props.setFilter}>
          {props.children}
        </a>
    );
  },
});

export default FilterLink;

I think there is a huge hole in my understanding of stateless functional components. Any help or advice or direction would be greatly appreciated.

Thank you,

Yury Tarabanko Yury Tarabanko · Accepted Answer · 2017-08-25T05:45:01

You implemenentation of stateless component is just wrong. It should do render instead of returning an object with render method.

const FilterLink = props => {
    console.log('props.filter: ', props.filter);
    console.log('props.filterType: ', props.filterType);
    console.log(props.filter === props.filterType);
    return (
      props.filter === props.filterType ?
        <span className='active-link'>{props.children}</span>
        :
        <a id={props.filterType} className='link' href='' onClick={props.setFilter}>
          {props.children}
        </a>
    );
};

Stateless functional component vs class based: why won't my props change?

1 Answers