0

I am trying to set up a cancel button that will revert all of my ref objects to their defaultValue. This property is nested within each element of the array in the item.state.defaultValue.

I am trying the code below:

My state of refs : 

refs: Array<EditableText | null>;

The Editable text component

<EditableText
   disabled={!this.state.editingDesc}
   multiline={true}
   maxLines={10}
   defaultValue={description}
   ref={input =>
     (this.state.refs[index + 1] = input)
   }
/>

public handleCancelBtn = () => {
    const oldRefs = [...this.state.refs];
    const newRefs = oldRefs.map(ref => {
      if (ref != null) {
        const newRef = Object.assign({}, ref);
        const newState = Object.assign({}, ref.state, {
          lastValue: ref.props.defaultValue,
          value: ref.props.defaultValue
        });
        newRef.state = newState;
        return newRef;
      }
      return null;
    });

    this.setState({
      editingDesc: false,
      refs: newRefs
    });
  }

It seems that my state is not updating. I believe this is because of the nested change of the property. I can find examples for one object nesting, but not how to do this for an array of objects. Thank you for any and all help

C.Programming
  • 195
  • 1
  • 3
  • 14
  • 1
    It is not recommended to use nested objects like that as a state. Can you break them up into smaller objects? it seems like you are making it more complicated than it needs to be. – cullanrocks May 21 '19 at 16:09
  • Yes, I'm aware that it is overly complicated and not recommended. Eventually, the goal is to refactor this code, but right now I'm stuck trying to fix it this way. Is there still a way to accomplish what I am trying to do? – C.Programming May 21 '19 at 16:14
  • What exactly is happening? Does it reads oldRefs correctly? Does it calculates newRefs correctly? – Valerii May 21 '19 at 16:25
  • I apologize. Old refs is fine with retrieving the state. NewRefs seems to be exactly what I want with the value being reverted to the defaultValue correctly. It just seems like react is not seeing a difference since it only does a shallow diff – C.Programming May 21 '19 at 16:34
  • 1
    @C.Programming, can you provide all code of the component? – Valerii May 21 '19 at 17:08
  • I posted more of the component code. The refs are the editable texts which are controlled by refs. – C.Programming May 21 '19 at 17:52

0 Answers0