Refactor code to adhere to the rules in the description about andela-societies-frontend

[joykare]

Conversation that happened around this:
Farhan: Hey team so on my ticket the second part indicates that I create a constructor for each component that uses state however, one of the key uses of property initializers is to not use the constructor so as to have readable components. the other advantage is that We can use arrow functions for custom component methods (and avoid having to bind this). https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components/

John Paul: We need the constructor to allow us to initialize the constructor of the base class (React.Component) so that we can use this.* in the constructor. This would come in handy when you need to store the props in the state.

Farhan: First of all we should not store props in the state reason being that when ever the props of the component changes with-out the component being refreshed….the new prop will never be displayed cause the constructor function will never update the current state of the component.

Joy: Using the class constructor does not in anyway prevent you from using arrow functions.
Why the constructor is important is that we could initialise many other things like what John said
E.g I can store props in state and therefore be able to do some stuff on the props if they need refactoring in that component https://reactjs.org/docs/react-component.html#constructor
Just an example:

constructor() {
    super();
    this.state = {
      printed: props.printed
    };
    componentWillReceiveProps(nextProps) {
          this.setState({
            printed: nextProps.printed
         })
   }
  }

Using this.state={} is readable but for class-based components it ties the number of things you can do. It might work at first but in the long run leads to unwanted consequences check react blog post I just sent.