how to update FieldArray elements with redux store variable

Question

I am using redux-form with a FieldArray.By default 1 element will be there in array and it is populated from JSON. I can add upto 3 elements in FieldArray component.
In below code, 'elementList' property is coming from JSON and also I have store variables named as'elements' and 'elementList'. I initialize these store variable with elementList from JSON at first and then keep updating store variables when 'Add Element' is clicked on. I can see store variables are updating properly but on screen Field array elements are not updating.It may be because name property 'elementList' in FieldArray may refer to JSON element.

Is it possible, if I can refer to store variables 'elementList' or 'elements' in name property of 'FieldArray'. Please advice.

Main page

  <div>
      <FieldArray name="elementList" component={Elements}
                  props={this.props}/>
      <button type="button" className="btn btn-primary"
              onClick={event => this.addElement(elementDTO)}>Add Element
      </button>
      <br/>
  </div>
  
  addElement(elementDTO){
        if(this.props.elements && this.props.elements!=undefined && this.props.elements.length >= 3){
            return;
        }
        this.props.addReqElement(this.props.elements);
    }

Field Array page

const elements= ({props, meta: {error, submitFailed}}) => {
    const {fields} = props;
    return (
    {fields.map((element, index) => (
     <div> 
            //Field definitions
     </div>
))}

Thank you

Update: Adding method from Redux Action and Reducer

 export function addReqElement(childList) {
         let state = store.getState()
         let newChild= 
            state.requestReducer.DTOobj.requestDoc;  //this is an empty element coming from backend with few properties and adding rest of the //proerties as below to create a new child 
        newChild.prop1 = null
        newChild.prop2 = null
        childList.push(newChild)
        return (dispatch) => {
            dispatch(setDoc(childList));
        }
    }
    

export function setDoc(payload) {
    return {
        type: ADD_DOC,
        payload: payload
    }
}

Update 2: I tried to remove push and used spread operator , but it did not work. I have inner array also, that is working as I am using different strategy. I take pull parent array ,it's index and update parent array with the new inner array. It works but parent array I am not getting how should I make it work. I tried to set the main array to the form props and render full page by dispatching an action but it did not work. Any suggestions plz?

From the main array page:

render() {
   const {fields, parentArrayFromStore} = this.props;
    return (
       <div className="col-sm-12">
          {fields.map((doc, index) => (
           <div key={index}>
            <div className="col-sm-12">
              <FieldArray name={`${doc}.innerArrayList`} component={CustomInnerArrayComponent}/>
            </div>
            <div className="row">
               <div className="col-sm-4">
                  <button type="button" className="btn btn-primary"
                          onClick={event => this.addInnerArray(index, parentArrayFromStore ,fields.get(index).innerArrayList)}>Add Printer
                   </button>
                </div>
            </div>
        </div>
    ))}
    </div>)
            }

In Action class

export function addInnerArray(index, parentArrayFromStore, innerArrayList) {
    let newInnerItem= {};
    newInnerItem.prop1 = null
    newInnerItem.prop2 = null
   
    innerArrayList.push(newInnerItem)
    parentArrayFromStore[index].innerArrayList = innerArrayList;

    return (dispatch) => {
        dispatch(setParentArray(parentArrayFromStore));
    }
}

export function setParentArray(payload) {
    return {
        type: ADD_DOC,
        payload: payload
    }
}

Can't you append the new-element in elementList, or save a copy of elementList and then append in that? Also, please add a working example in codesandbox / stackblitz. — vrintle
– vrintle, Commented Aug 23, 2020 at 11:14
Hello Rahul, I tried to create a new list and append both the existing list and the new child but it did not work out. Can you please provide some sample. I am new to UI development so need to check on putting that code alone on sandbox — Khushi
– Khushi, Commented Aug 26, 2020 at 9:50
Hi @Khushi can you please update your question with the statements used in this fn "addReqElement"; I would suggest that in mainpage constructor have a state with takes array as input and in "addReqElement" update that state using setstate,, don't mutate the state array using push/splice etc — Ashish Yadav
– Ashish Yadav, Commented Aug 26, 2020 at 11:08

Ashish Yadav · Accepted Answer · 2020-08-26 11:47:05Z

1

Hi the issue is with the push statement in your function when updating states in the constructor or reducer use concat or spread operator[...]> I have made a sample over here please check

onAddItem() {
        let list = [...this.state.items, {text:`Check 1`}];
        this.setState({items:list});
}

in your case you can do the following

let arr = [...childList, newChild]

then dispatch the arr

 dispatch(setDoc(arr));

answered Aug 26, 2020 at 11:47

Ashish Yadav

3,2141 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Khushi Over a year ago

Thank you, but I have already tried using spread operator but it failed to work. FYI, I have one more array inside this array. That is working fine because I am getting the full parent array and index of the parent and pushing new child element in child array. I have updated question with update 2 , I do not how to update parent array in similar way, I even try to get the new parent array list and set it to main form and dispatched the action for full form but I am not getting any success with this :( Thank you for your effort

Ashish Yadav Over a year ago

in that case can you share your reducer as well

Collectives™ on Stack Overflow

how to update FieldArray elements with redux store variable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related