title: How to add elements dynamically using redux
body: <p>Hi I am trying to create a simple form builder using react + redux.</p>
  
  <p>I am facing an issue with adding elements dynamically from the sidebar to the container.</p>
  
  <p>action.js</p>
  
  <pre><code>export const addNewTextBox = () =&gt; {
      return {
          type: 'ADD_NEW_TEXT_BOX'
      };
  }
  
  export const addNewName = () =&gt; {
      return {
          type: 'ADD_NEW_NAME'
      };
  }
  
  export const updateChildren = (child) =&gt; {
      return {
          type: 'UPDATE_CHILDREN',
          child
      };
  }
  </code></pre>
  
  <p>addElementsReducer.js</p>
  
  <pre><code>const initialState = {
    addFormElementsVisible: false,
    textBoxNum: 0,
    nameNum: 0,
    childKey: 0,
    children: []
  }
  
  const addElements = (state = initialState, action) =&gt; {
      switch (action.type) {
      case 'ADD_NEW_TEXT_BOX':
          return Object.assign({}, state, {
              textBoxNum: state.textBoxNum + 1,
              childKey: state.childKey + 1,
          });
      case 'ADD_NEW_NAME':
          return Object.assign({}, state, {
              nameNum: state.nameNum + 1,
              childKey: state.childKey + 1,
          });
      case 'UPDATE_CHILDREN':
          return Object.assign({}, state, {
              children: state.children.concat([action.child])
          });
      default:
          return state
      }
  }
  
  export default addElements;
  </code></pre>
  
  <p>The above reducer and action is being passed in my Layout.js file which renders the sidebar and the container for adding elements.</p>
  
  <p>Layout.js</p>
  
  <pre><code>&lt;Sidebar
  textBoxNum={this.props.textBoxNum}
  nameNum={this.props.nameNum}
  childKey={this.props.childKey}
  updateChildren={this.props.actions.updateChildren}
  addNewTextBox={this.props.actions.addNewTextBox}
  addNewName={this.props.actions.addNewName}/&gt;
  
  &lt;Create children={this.props.children}/&gt;
  </code></pre>
  
  <p>From create I am sending children to ElementsContainer.js</p>
  
  <pre><code>&lt;div&gt;
      &lt;div className="new_elements"&gt;
          {(() =&gt; {
             this.props.children.map((child) =&gt; {
                 return (
                    &lt;JsxParser
                        components={[TextBox]}
                        jsx={child}
                    /&gt;
                 );
              })
           })()}
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><code>this.props.children</code> renders an array of elements from the sidebar.</p>
  
  <p>How do I push the elements from my sidebar to the childrens array and render it on my container?</p>
  
  <p>If this is a duplicate kindly guide me to the solution. If this is not enough, kindly let me know what more clarification can I provide on my question. Thanks in advance.</p>