How to dynamically add items using shorthand

Question

Hi, I am trying to create a simple form builder using reaction + redux.

I ran into the problem of dynamically adding items from the sidebar to the container.

action.js

export const addNewTextBox = () => {
    return {
        type: 'ADD_NEW_TEXT_BOX'
    };
}

export const addNewName = () => {
    return {
        type: 'ADD_NEW_NAME'
    };
}

export const updateChildren = (child) => {
    return {
        type: 'UPDATE_CHILDREN',
        child
    };
}

addElementsReducer.js

const initialState = {
  addFormElementsVisible: false,
  textBoxNum: 0,
  nameNum: 0,
  childKey: 0,
  children: []
}

const addElements = (state = initialState, action) => {
    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;

The above reducer and action are passed in my Layout.js file, which displays a sidebar and a container for adding items.

Layout.js

<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}/>

<Create children={this.props.children}/>

From creation I send children to ElementsContainer.js

<div>
    <div className="new_elements">
        {(() => {
           this.props.children.map((child) => {
               return (
                  <JsxParser
                      components={[TextBox]}
                      jsx={child}
                  />
               );
            })
         })()}
      </div>
   </div>

this.props.children Displays an array of items from the sidebar.

How do I push elements from the sidebar onto a child array and display it in a container?

If this is a duplicate, kindly direct me to the solution. If this is not enough, kindly tell me what additional clarifications I can provide on my question. Thanks in advance.

Answer 1

{() => {
  return( //add return
   this.props.children.map((child) => {
    return(
        //your code
      )
  })
 )
}

Answer 2

JSX <MyComponent> </MyComponent> children ... , <Create /> ... children prop - ..

Answer 3

, :

• this.props.children <Create/> - - JSX, @stafamus. <Create passingMyChildren={this.props.myChildren}/> ? <Sidebar> myChildren children. , , , , <Create/>. , . , . , 'this', . , , . .

• , , <Sidebar> this.props.children, <Create> . . JSX, View div, - .

  var rows = []; for (var i=0; i < numrows; i++){ rows.push(<ObjectRow />); } return <tbody>{rows}</tbody>;

:

var myChildren = [];
for(var i=0; i<numOfChildren; i++){
  myChildren.push(<Sidebar/>);
}

myChildren <Create/>. , , <Create/>. , , ObjectRows.

, .