title: React Redux - passing props with actions
body: <p>I have a simple component that I'd like to toggle depending on its props. Code looks as follows:</p>
  
  <p><strong>actions.js</strong></p>
  
  <pre><code>const toggleTodo = (id) =&gt; {
    return {
      type: 'TODOITEM__TOGGLE_TODO',
      id
    }
  };
  
  export {
    toggleTodo
  }
  </code></pre>
  
  <p><strong>component.js</strong></p>
  
  <pre><code>import React from 'react';
  
  const TodoItem = (props) =&gt; {
    const completed = props.isDone === true ? 'done' : '';
  
    return (
      &lt;li className={completed} id={props.id} onClick={props.toggle}&gt;{props.text}&lt;/li&gt;
    );
  }
  
  export default TodoItem;
  </code></pre>
  
  <p><strong>container.js</strong></p>
  
  <pre><code>import { connect } from 'react-redux';
  import component from './component';
  import * as actions from './actions';
  
  const mapStateToProps = (state) =&gt; {
    return state;
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      toggle: (id) =&gt; { dispatch(actions.toggleTodo(id)); }
    }
  };
  
  const TodoItem = connect(
    mapStateToProps, mapDispatchToProps
  )(component);
  
  export default TodoItem;
  </code></pre>
  
  <p><strong>reducers.js</strong></p>
  
  <pre><code>const todoItemReducer = (state = [], action) =&gt; {
    switch (action.type) {
      case 'TODOITEM__TOGGLE_TODO':
        console.log(action.id);
        return state;
    }
  
    return state;
  };
  
  export default todoItemReducer;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  
  import TodoItem from './components/TodoItem/container';
  
  import reducers from './reducers';
  
  const store = createStore(reducers, window.devToolsExtension &amp;&amp; window.devToolsExtension());
  
  render(
    &lt;Provider store={store}&gt;
      &lt;TodoItem key="1" isDone={false} text="Test" id="1" /&gt;
    &lt;/Provider&gt;,
    app
  );
  </code></pre>
  
  <p><strong>reducers.js</strong></p>
  
  <pre><code>import { combineReducers } from 'redux';
  
  // Reducers
  import todoItemReducer from './components/TodoItem/reducers';
  
  const reducers = combineReducers({
    todoItemReducer
  });
  
  export default reducers;
  </code></pre>
  
  <p>When I run this and click on the said component, console returns an <code>event</code> object. What can I do to pass something there?</p>
  
  <p>Please note that I used <code>onClick={() =&gt; { props.toggle(props.id) }}</code> before, but I don't think that this is a proper way.</p>