Unknown prop `onTouch` on <input> tag

[IsaacBell]

Hello, I would very much appreciate some insight as to where I'm going wrong.

I'm attempting to run the data table example from the docs. The only change is I have omitted the rows which incorporate other Essence components (so Input, etc.).

import React      from 'react';
import DataTable  from 'essence-data-table';
import ClassNames from 'classnames';
import Icon       from 'essence-icon';
// import Switch from 'essence-switch'
// import Menu from 'essence-menu';
// import Input from 'essence-input';
// import { Text } from 'essence-core';

var tableData = {
 'header': [
  {
   'name': 'Desert (100g serving)',
   'tooltip': 'Caption for the column Desert (100g serving)',
   'onSorting': (function() { console.log('sort by Desert (100g serving)'); })
  },
  {
   'name': 'Calories',
   'tooltip': 'Caption for the column Calories',
   'onSorting': (function() { console.log('sort by Calories'); })
  },
  {
   'name': 'Fat (g)',
   'tooltip': 'Caption for the column Fat (g)',
   'onSorting': (function() { console.log('sort by Fat (g)'); })
  },
  {
   'name': 'Carbs (g)',
   'tooltip': 'Caption for the column Carbs (g)',
   'onSorting': (function() { console.log('sort by Carbs (g)'); })
  },
  {
   'name': 'Protein (g)',
   'tooltip': 'Caption for the column Protein (g)',
   'onSorting': (function() { console.log('sort by Protein (g)'); })
  },
  {
   'name': 'Sodium (mg)',
   'tooltip': 'Caption for the column Sodium (mg)',
   'onSorting': (function() { console.log('sort by Sodium (mg)'); })
  },
  {
   'name': 'Calcium (%)',
   'tooltip': 'Caption for the column Calcium (%)',
   'onSorting': (function() { console.log('sort by Calcium (%)'); })
  },
  {
   'name': 'Iron (%)',
   'tooltip': 'Caption for the column Iron (%)',
   'onSorting': (function() { console.log('sort by Iron (%)'); })
  },
 ],
 'rows': [
  ['Frozen yogurt', '159', '6.0', '24', '4.0', '87', '14%', '1%'],
  ['Ice cream sandwich', '237', '9.0', '37', '4.3', '129', '8%', '1%'],
  ['Eclair', '262', '16.0', '24', '6.0', '337', '6%', '7%'],
  ['Cupcake', '305', '16.0', '24', '6.0', '413', '3%', '6%'],
  ['Gingerbread', '356', '3.7', '67', '4.3', '413', '3%', '8%'],
  ['Jelly bean', '356', '16.0', '94', '4.3', '129', '8%', '16%'],
  ['Lollipop', '392', '0.2', '97', '0.0', '50', '0%', '2%']
 ],
 'footer': {
  'limit': 5,
  'total': 100,
  'pagination': {
   'start': 1,
   'end': 10,
   'callback': (function() { console.log('footer change page'); })
  },
  'next': {
   'context': (<Icon name='hardware-keyboard-arrow-right' />),
   'callback': (function() { console.log('footer next page'); })
  },
  'prev': {
   'context': (<Icon name='hardware-keyboard-arrow-left' />),
   'callback': (function() { console.log('footer previous page'); })
  },
 }
};

export default class DataTableTest extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   classes: ClassNames(
    this.props.classes,
    this.props.className
   )
  };
 }

  render() {
   return(
    <DataTable data={tableData} />
   );
  }
};

When I bundle and run in Webpack I run into these two errors in console:

bundle.js:2065 Warning: Unknown prop `onTouch` on <input> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in input (created by Switch)
    in label (created by Switch)
    in span (created by Switch)
    in span (created by Switch)
    in Switch (created by DataTable)
    in td (created by DataTableColumn)
    in DataTableColumn (created by DataTable)
    in tr (created by DataTableRow)
    in DataTableRow (created by DataTable)
    in thead (created by DataTableHeader)
    in DataTableHeader (created by DataTable)
    in table (created by DataTable)
    in DataTable (created by DataTableTest)
    in DataTableTestprintWarning @ bundle.js:2065warning @ bundle.js:2089warnUnknownProperties @ bundle.js:22125handleElement @ bundle.js:22138onBeforeMountComponent @ bundle.js:22143callHook @ bundle.js:8899emitEvent @ bundle.js:8911onBeforeMountComponent @ bundle.js:9133mountComponent @ bundle.js:8529mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532mountChildren @ bundle.js:15212_createInitialChildren @ bundle.js:12221mountComponent @ bundle.js:12046mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532performInitialMount @ bundle.js:16188mountComponent @ bundle.js:16075mountComponent @ bundle.js:8532mountComponentIntoNode @ bundle.js:21315perform @ bundle.js:9525batchedMountComponentIntoNode @ bundle.js:21337perform @ bundle.js:9525batchedUpdates @ bundle.js:18395batchedUpdates @ bundle.js:8187_renderNewRootComponent @ bundle.js:21531_renderSubtreeIntoContainer @ bundle.js:21612render @ bundle.js:21633renderComponent @ bundle.js:798_mount @ bundle.js:816_mountNode @ bundle.js:644_mountNodes @ bundle.js:660_mountNodes @ react_integration.self-ffb7c1b….js?body=1:8
bundle.js:2065 Warning: Switch is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-componentsprintWarning @ bundle.js:2065warning @ bundle.js:2089updateWrapper @ bundle.js:14191updateComponent @ bundle.js:12289receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460performUpdateIfNecessary @ bundle.js:16376performUpdateIfNecessary @ bundle.js:8643runBatchedUpdates @ bundle.js:8240perform @ bundle.js:9525perform @ bundle.js:9525perform @ bundle.js:8179flushBatchedUpdates @ bundle.js:8262closeAll @ bundle.js:9591perform @ bundle.js:9538batchedUpdates @ bundle.js:18395batchedUpdates @ bundle.js:8187_renderNewRootComponent @ bundle.js:21531_renderSubtreeIntoContainer @ bundle.js:21612render @ bundle.js:21633renderComponent @ bundle.js:798_mount @ bundle.js:816_mountNode @ bundle.js:644_mountNodes @ bundle.js:660_mountNodes @ react_integration.self-ffb7c1b….js?body=1:8

bundle.js:2065 Warning: Switch is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-componentsprintWarning @ bundle.js:2065warning @ bundle.js:2089updateWrapper @ bundle.js:14191updateComponent @ bundle.js:12289receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460receiveComponent @ bundle.js:16362receiveComponent @ bundle.js:8611updateChildren @ bundle.js:15643_reconcilerUpdateChildren @ bundle.js:15182_updateChildren @ bundle.js:15286updateChildren @ bundle.js:15273_updateDOMChildren @ bundle.js:12464updateComponent @ bundle.js:12282receiveComponent @ bundle.js:12240receiveComponent @ bundle.js:8611_updateRenderedComponent @ bundle.js:16569_performComponentUpdate @ bundle.js:16539updateComponent @ bundle.js:16460performUpdateIfNecessary @ bundle.js:16376performUpdateIfNecessary @ bundle.js:8643runBatchedUpdates @ bundle.js:8240perform @ bundle.js:9525perform @ bundle.js:9525perform @ bundle.js:8179flushBatchedUpdates @ bundle.js:8262closeAll @ bundle.js:9591perform @ bundle.js:9538batchedUpdates @ bundle.js:18395batchedUpdates @ bundle.js:8187_renderNewRootComponent @ bundle.js:21531_renderSubtreeIntoContainer @ bundle.js:21612render @ bundle.js:21633renderComponent @ bundle.js:798_mount @ bundle.js:816_mountNode @ bundle.js:644_mountNodes @ bundle.js:660_mountNodes @ react_integration.self-ffb7c1b….js?body=1:8

It appears React isn't recognizing Essence's OnTouch event properties as valid? Or is there simply some sort of configuration error on my end?

Please help!

My webpack.config.js, in case relevant:

const path                = require('path');
const webpack             = require('webpack');
const superagent          = require('superagent');
const ExtractTextPlugin   = require('extract-text-webpack-plugin');
const OutputPath          = path.join(__dirname, '/app/assets/javascripts');
const stylesPath          = path.join(__dirname, '/app/assets/stylesheets');
const CssIndex            = stylesPath + '/src/app.css';
const CssBundle           = stylesPath + '/bundle.css';

var webpackPostcssTools   = require('webpack-postcss-tools');
var atImport              = require('postcss-import');
var map                   = webpackPostcssTools.makeVarMap(CssIndex);

module.exports = {
  entry: {
    main: ['./app/react/index.js']
  },
  output: {
    path: OutputPath,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        key: 'jsx',
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loaders: ['babel']
      },
      {
        key: 'style',
        test: /(\.css|\.scss)$/,
        loader: "style-loader!css?importLoaders=2!postcss-loader!sass-loader"
      },
      {
        test: /\.less$/,
        loader: "style-loader!css!less-loader"
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file'
      },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss', '.less']
  },
  plugins: [
  //   new ExtractTextPlugin(CssBundle, {
  //     allChunks: true
  //   })
  ],
  postcss: [
    atImport({
      path: CssIndex,
      addDependencyTo: webpack
    }),
    webpackPostcssTools.prependTildesToImports,
    require('postcss-custom-properties')({
        variables: map.vars
    }),
    require('postcss-custom-media')({
        extensions: map.media
    }),
    require('precss')(),
    require('postcss-cssnext')({ browsers: ['> 1%', 'ie >= 8'] }),
    require('postcss-reporter')(),
    require('postcss-responsive-type')(),
    require('postcss-font-magician')()
  ]
};