title: Nextjs React SSR with styled-jsx - Cannot read property 'state' of undefined
body: <p>I have stumbled upon a problem which I cannot seem to resolve. I tried to search here for the solution but was unable to help myself. I am a newbie in javascript and react so be considerate.</p>
  
  <p><strong>Problem:</strong> 
  I am using React (16.5.0) with nextjs (6.1.2) with styled-jsx like so:</p>
  
  <pre><code>import React, {Component} from 'react';
  import PropTypes from 'prop-types';
  import Link from 'next/link';
  
  class ProductCard extends Component {
      constructor(props) {
          super(props);
          this.state = {imgLoaded: false};
          this.imgHasLoaded = this.imgHasLoaded.bind(this);
      }
  
      imgHasLoaded() {
          this.setState({imgLoaded:true})
      }
  
      render() {
          return (
              &lt;div className="thumbnail-container"&gt;
                  &lt;div className="loader-box"&gt;
                      &lt;img src={require("../static/loading.png")} className="loading-img" /&gt;
                  &lt;/div&gt;
                  &lt;img src={this.props.imgSrc} className="main-img" onLoad={this.imgHasLoaded} /&gt;
                  &lt;div className="thumbnail-text"&gt;
                      {this.props.text}
                  &lt;/div&gt;
                  &lt;ul className="item-list"&gt;
                      {this.props.links.map(link =&gt;
                          &lt;li className="item"&gt;
                              &lt;span className="item-span"&gt; {link.text} &lt;/span&gt;
                              {link.subLinks &amp;&amp;
                                  &lt;ul className="sub-item-list"&gt;
                                      {link.subLinks.map(subLink =&gt; &lt;li&gt;{subLink.text}&lt;/li&gt;)}
                                  &lt;/ul&gt;
                              }
                          &lt;/li&gt;
                      )}
                  &lt;/ul&gt;
                  &lt;style jsx&gt; {`
                      .thumbnail-container {
                          user-select: none;
                          position: relative;
                          text-align: center;
                          width: 98%;
                          height: 98%;
                          margin: 1%;
                          display: block;
                          border: 0.3px solid black;
                          overflow: hidden;
                          border-radius: 10px;
                          box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
                          overflow: hidden;
                          align-items: center;
                      }
                      .thumbnail-text {
                          position: absolute;
                          width: 100%;
                          top: 50%;
                          left: 50%;
                          transform: translate(-50%, -50%);
                          color: #ffffff;
                          font-size: 1.8em;
                          background-color: #333;
                          padding: 5px;
                          border-radius: 5px;
                          text-shadow: 1px 1px #000000;
                          text-transform: uppercase;
                          box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 1);
                          transition: all 0.2s ease;
                      }
                      .thumbnail-container:hover .thumbnail-text, .thumbnail-container:focus .thumbnail-text, .thumbnail-container:active .thumbnail-text {
                          top: 0;
                          transform: translate(-50%, 0);
                          background-color: rgba(255, 124, 4, 0.9);
                          color: #000000;
                          text-shadow: none;
                      }
                      .main-img {
                          width: 100%;
                          height: 100%;
                          border-radius: 8px;
                          margin: auto;
                          -webkit-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
                          -moz-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
                          filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
                          opacity: ${this.state.imgLoaded ? 1 : 0};
                      }
                      .thumbnail-container:hover .main-img, .thumbnail-container:focus .main-img, .thumbnail-container:active .main-img{
                          -webkit-filter: grayscale(40%) contrast(120%)  saturate(120%) brightness(30%);
                          -moz-filter: grayscale(40%) contrast(120%)  saturate(120%) brightness(30%);
                          filter: grayscale(40%) contrast(120%)  saturate(120%) brightness(30%);
                      }
                      .item-list {
                          display: none;
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          height: calc(100% - 2em);
                          flex-flow: column wrap;
                          justify-content: space-around;
                          list-style-type: none;
                      }
                      .thumbnail-container:hover .item-list, .thumbnail-container:focus .item-list, .thumbnail-container:active .item-list{
                          display: flex;
                      }
                      .item {
                          font-size: 1.3em;
                          display: flex;
                          flex-flow: column wrap;
                      }
                      .item-span {
                          padding-left: 8px;
                          border-bottom: solid #ff7c04;
                          border-left: solid #ff7c04;
                          transition: border-bottom 0.2s ease;
                      }
                      .item:hover .item-span, .item:focus .item-span, .item:active .item-span{
                          border-bottom: none;
                      }
                      .sub-item-list {
                          margin-left: 8px;
                          margin-top: 8px;
                          border-bottom: solid #ff7c04;
                          border-left: solid #ff7c04;
                          height: auto;
                          flex: 0;
                          overflow: hidden;
                          transition: flex 0.2s ease;
                      }
                      .item:hover .sub-item-list, .item:focus .sub-item-list, .item:active .sub-item-list{
                          flex: 1;
                      }
                      .loader-box {
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate(-50%, -50%);
                          width: 48px;
                          height: 48px;
                      }
                      .loading-img {
                          -webkit-animation: rotate-scale-up 1s linear infinite both;
                          animation: rotate-scale-up 1s linear infinite both;
                      }
  
                      @-webkit-keyframes rotate-scale-up {
                        0% {
                          -webkit-transform: scale(1) rotateZ(0);
                                  transform: scale(1) rotateZ(0);
                        }
                        50% {
                          -webkit-transform: scale(1.5) rotateZ(180deg);
                                  transform: scale(1.5) rotateZ(180deg);
                        }
                        100% {
                          -webkit-transform: scale(1) rotateZ(360deg);
                                  transform: scale(1) rotateZ(360deg);
                        }
                      }
                      @keyframes rotate-scale-up {
                        0% {
                          -webkit-transform: scale(1) rotateZ(0);
                                  transform: scale(1) rotateZ(0);
                        }
                        50% {
                          -webkit-transform: scale(1.5) rotateZ(180deg);
                                  transform: scale(1.5) rotateZ(180deg);
                        }
                        100% {
                          -webkit-transform: scale(1) rotateZ(360deg);
                                  transform: scale(1) rotateZ(360deg);
                        }
                      }
  
  
                      a {
                          text-decoration: none;
                      }
                      @media only screen and (max-width: 700px) {
                          .thumbnail-container {
                              width: 96%;
                              height: 96%;
                              margin: 2%;
                          }
                          .thumbnail-text {
                              height: 1.5em;
                              font-size: 1em !important;
                          }
                          .item-list {
                              height: calc(100% - 3em) !important;
                          }
                      }
                  `}
                  &lt;/style&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>However when using code above I get </p>
  
  <blockquote>
    <p>Cannot read property 'state' of undefined</p>
  </blockquote>
  
  <p>error in render function at line 26 (where <code>item-list</code> begins). The problem has something to do with using </p>
  
  <p><code>opacity: ${this.state.imgLoaded ? 1 : 0};</code> </p>
  
  <p>in styled-jsx, because without this line, code works well. </p>
  
  <p>Interestingly if I remove the <code>item-list</code> and its contents everything is working even with </p>
  
  <p><code>opacity: ${this.state.imgLoaded ? 1 : 0};</code> </p>
  
  <p>I am sorry if this is something trivial or/and i forgot something fundamental. Just push me in the correct direction please</p>