Passing functions and variables as arguments to map() in Javascript/React
<p>I want to pass a prop called <code>verified</code> through each map function and I am having difficulty setting it up. </p>

<p><strong>UPDATE</strong>:</p>

<p>Passing <code>verified</code> to renderContinents works, but when add a parameter to renderCountry like this:</p>

<pre><code>  {continent.countries.map(renderCountry(null, verified))}
</code></pre>

<p>My output is blank. Shouldn't this work though?</p>

<p>Updated code: </p>

<pre><code>  const renderCities = cities =&gt; {
    return (
      &lt;div&gt;
        &lt;label&gt;
          &lt;input
              onChange={onChange}
              type="checkbox"/&gt;
        {cities.name}
        &lt;/label&gt;
      &lt;/div&gt;
    );
  };

  const renderCountries = ({country, verified}) =&gt; {
    console.log("came to country");
    return (
      &lt;div className="city-location"&gt; 
        &lt;label&gt;
            &lt;input
              onChange={onChange}
              type="checkbox"/&gt;
          {country.name}
        &lt;/label&gt;
        {country.cities.map(renderCities)}
      &lt;/div&gt;
    ); 
  };



function onChange(e) {
  console.log('checkbox verified:', (e.target.verified));
}


class AreasComponent extends Component {
      constructor(props) {
        super(props);
        this.state = { 
        };
        this.renderContinents = this.renderContinents.bind(this);
    }

  componentWillMount() {
    this.props.fetchAllAreas(); 
  }

  renderContinents(verified, continent) {
    console.log("came to continent");
      return(
        &lt;div className="continent-location"&gt;
          &lt;label&gt;
            &lt;input
              onChange={onChange}
                type="checkbox"/&gt;
             {continent.name}
          &lt;/label&gt;

          {continent.countries.map(renderCountries(null, verified))}

        &lt;/div&gt;
    )
  } 


  render() { 
    if (!this.props.verified || !this.props.areas) {
      return &lt;div&gt;Loading Areas...&lt;/div&gt;
    }
    return(
        &lt;div&gt; 
          {this.props.areas.map(this.renderContinents.bind(this, this.props.verified))}
        &lt;/div&gt;
      );
    }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchAllAreas, checkArea}, dispatch);
}


function mapStateToProps(state) {
  return { areas: state.areas.all,
           verified:state.areas.verified
  };
}


export default connect(mapStateToProps, mapDispatchToProps)(AreasComponent);
</code></pre>

<p>My other problem is the <code>onChange(e)</code> function. It's global so it works when I click any checkbox, but I want to make it so that when onChange is clicked, it can take in a parameter and dispatch the action <code>checkArea</code>, which, to me means it has to be bound and should also be fed as a parameter. I tried this: </p>

<pre><code>  {this.props.areas.map(this.renderContinents.bind(this, this.props.verified, this.props.checkArea))} 
</code></pre>

<p>but it returns a blank result. Is it possible to send a function into a map () parameter and is there a way to get renderCountry/renderCity to work with parameters? </p>