title: React Class how to pass variables in all methods in same file
body: <p>I have a problem understanding the concept. I want to pass windColor variable from inside of renderWeather() to render() and function alertKitesurf</p>
  
  <p>I should use this.state and setState or I can do it with variables? </p>
  
  <p>my code doesn't work.</p>
  
  <p>PS. why outside the class you need to add function method() while inside the class's brackets you don't need?</p>
  
  <pre><code>import React, ....
  
  class WeatherList extends Component {   constructor(props) {
      super(props);
      this.fixit = 'blue';   }   //  render single city   
  renderWeather(cityData) {
          const lol = this;
          const name = cityData.city.name;
          const temp = cityData.list.map(weather =&gt; (weather.main.temp - 272));
          const humi = cityData.list.map(weather =&gt; weather.main.humidity);
          const wind = cityData.list.map(weather =&gt; weather.wind.speed);
          //  Kitesurf alert!
          console.log(lol.fixit);
          const windColor = alertKitesurf(wind);
          lol.fixit = windColor;
          return (
            &lt;tr key={name}&gt;
              &lt;td className="col-md-3"&gt;{name}&lt;/td&gt;
              &lt;Chart data={temp} color="blue" /&gt;
              &lt;Chart data={humi} color="blue" /&gt;
              &lt;Chart data={wind} color={windColor} /&gt;
            &lt;/tr&gt;
          );   }
  
  
    render() {
      let fixdiv;
      if (this.fixit === 'blue') {
        fixdiv = &lt;div&gt;test&lt;/div&gt;;
      }
      else {
        fixdiv = &lt;div&gt;OMG&lt;/div&gt;;
      }
      return (
        &lt;div&gt;
          &lt;table className="table table-hover"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th className="col-md-3"&gt;City&lt;/th&gt;
                &lt;th className="col-md-3"&gt;Temperature&lt;/th&gt;
                &lt;th className="col-md-3"&gt;Humidity&lt;/th&gt;
                &lt;th className="col-md-3"&gt;Wind Speed&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.props.weather.map(this.renderWeather)}
            &lt;/tbody&gt;
          &lt;/table&gt;
          {fixdiv}
        &lt;/div&gt;
      );   } } //  function(state) -&gt; function( {weather}) -&gt; weather : weather -&gt; weather function mapStateToProps({ weather }) {   return { weather }; }
  
  function alertKitesurf(wind) {   let color = 'blue';   for (let windspeed of wind) {
      if (windspeed &gt; 7) {
         color = 'red';
      }   }   if (color === 'red') {
      alert("WIND SPOTTED! (14+knots) LETS GO KITSURF!");   }   return color; }
  
  export default connect(mapStateToProps)(WeatherList);
  </code></pre>