score:2

Accepted answer

it can be done by adding showactive state in template class.

add callback function in footer:

const footer = props => (
  <footer>
    <a onclick={props.onclick}>newsletter</a>
  </footer>
);

instead of setstate inside, read addclass from props:

class newsletter extends component {
  render() {
    let togglemodal = ["newslettermodal"];
    if (this.props.addclass) {
      togglemodal.push("active");
    }
    return (
      <div classname={togglemodal.join(" ")}>this part should update!</div>
    );
  }
}

add an event handler for footer onclick event:

const header = props => (
  <header onclick={props.ontogglemenu}>
    <h1>main page title</h1>
  </header>
)

class template extends component {
  constructor(props) {
    super(props);
    this.state = {
      showactive: false
    };
  }

  toggleclass = () => {
    this.setstate(prevstate => ({
      showactive: !prevstate.showactive
    }));
  };

  render() {
    return (
      <main>
        <header ontogglemenu={this.toggleclass} />
        <newsletter addclass={this.state.showactive} />
        <footer onclick={this.toggleclass} />
      </main>
    );
  }
}

note:
if you have multiple components interact with each other, it's better to consider using a state manager, such as redux or mobx

update: i updated my code, so it can run standalone as a complete demo.
there is the codesandbox demo link

score:0

you need to pass the toggle() method to your <footer /> component

import react from 'react'
import proptypes from 'prop-types';
import link from 'gatsby-link';
import footer from './footer';

class newsletter extends react.component {
    constructor(props) {
      super(props);
      this.state = {addclass: false}
    }
    toggle() {
      this.setstate({addclass: !this.state.addclass});
    }
    render() {
      let togglemodal = ["newslettermodal"];
      if(this.state.addclass) {
        togglemodal.push('active');
      }
      return(
            <div classname={togglemodal.join(' ')}>
                <div classname="newslettercontainer">
                   <footer onclick={this.toggle.bind(this)} />                     
                   <content /> 
                </div>
            </div>
        );
    }
}
export default newsletter;

in your footer.js file use the onclick function passed in as prop

import react from 'react'
import proptypes from 'prop-types';
import link from 'gatsby-link'
const footer = (props) => (
    <footer>
        <a onclick={this.props.onclick} href="javascript:;">
            newsletter
        </a>        
    </footer>
)
export default footer

Related Query

More Query from same tag