title: React Js, How can I save multiple data in onClick?
body: <p>I have <code>table</code>, which is positioned by <code>x</code> value and <code>y</code> value. These values are saved in database. I am using react dnd to positioning these <code>table</code>. </p>
  
  <p>What I am trying to do now is that save all tables position at one click. To do that I made code like below..</p>
  
  <pre><code>constructor() {
   super();
   this.state = {
     tables: []
   }}
  
  saveTables() {
   const { state, dispatch, tables } = this.props;
   this.state.tables.map((table) =&gt; {
    const data ={
      id: table.id,
      x: table.x,
      y: table.y,
    }
    dispatch(Actions.save(this.props.tables.channel, data));
   })
  }
  </code></pre>
  
  <p><code>&lt;button onClick={this.saveTables}&gt;Save&lt;/button&gt;</code></p>
  
  <p>So when component is mounted, i get all information of table into <code>this.state.tables</code>. So with <code>saveTables()</code> function, what I am trying to do is that by mapping <code>this.state.tables</code> dispatch actions to save position of <code>x</code> and <code>y</code> for every single table. However, it triggers error that <code>TypeError: action is undefined</code></p>
  
  <p>Is it possible to do it like above? or is there any other approaches to save all tables data in one click?</p>
  
  <p>Thanks in advance..   </p>
  
  <p>--Edit full error</p>
  
  <p><code>TypeError: action is undefined[Learn More]  app.js:54241:1
      routerMiddleware/&lt;/&lt;/&lt; http://localhost:4000/js/app.js:54241:1
      saveTables/&lt; http://localhost:4000/js/app.js:73190:9
      map self-hosted
      saveTables http://localhost:4000/js/app.js:73184:7
      bound saveTables self-hosted
      bound bound saveTables self-hosted
      ReactErrorUtils.invokeGuardedCallback http://localhost:4000/js/app.js:45316:7
      executeDispatch http://localhost:4000/js/app.js:39166:5
      executeDispatchesInOrder http://localhost:4000/js/app.js:39189:5
      executeDispatchesAndRelease http://localhost:4000/js/app.js:38581:5
      executeDispatchesAndReleaseTopLevel http://localhost:4000/js/app.js:38592:10
      forEach self-hosted
      forEachAccumulated http://localhost:4000/js/app.js:50930:5
      EventPluginHub.processEventQueue http://localhost:4000/js/app.js:38795:7
      runEventQueueInBatch http://localhost:4000/js/app.js:45345:3
      ReactEventEmitterMixin.handleTopLevel http://localhost:4000/js/app.js:45356:5
      handleTopLevelImpl http://localhost:4000/js/app.js:45438:5
      TransactionImpl.perform http://localhost:4000/js/app.js:50185:13
      ReactDefaultBatchingStrategy.batchedUpdates http://localhost:4000/js/app.js:45084:14
      batchedUpdates http://localhost:4000/js/app.js:48223:10
      ReactEventListener.dispatchEvent http://localhost:4000/js/app.js:45513:7
      bound</code></p>