Super simple example of React smart vs dumb components

Fruits.js

import React, { Component } from 'react';

export default class Fruits extends Component {

  render() {
    var fruits = this.props.fruits.map(function(fruit){
      return (
        <li>
          <button onClick={this.props.handleFavourite.bind(this, fruit)}>
            <span>{fruit} </span>
            <span>Fav!</span>
          </button>          
        </li>
      );
    }.bind(this));

    return (
      <ul>
        {fruits}
      </ul>
    );
  }

}

FruitSearch.js

import React, { Component } from 'react';
import Fruits from './Fruits.js';

export default class FruitSearch extends Component {

  constructor() {
    super();
    this.state = {
      fruits: [
        "Apple",
        "Orange"
      ],
      favourite: null
    };
    this.handleFavourite = this.handleFavourite.bind(this);
  }

  handleFavourite(favourite) {
    this.setState({
      favourite: favourite
    });
  }

  render() {
    return (
      <div>
        <h3>
          <span>Favourite Fruit: </span>
          {this.state.favourite}
        </h3>
        <Fruits fruits={this.state.fruits} handleFavourite={this.handleFavourite} />
      </div>
    );
  }
}

In Fruits.js (line 15) you don't have to apply bind(this) if you had used the new ES6 arrow syntax for the function.