reactjs - React prop value not updating in object initialization during re render

Question

I have a component that creates a configuration object during render. The configuration object relies on a value that's passed in as a prop. When the prop changes, I want the value inside of the configuration object to update. Here is what the component looks like:

export const LeaseEditor = ({ onChange, leaseDocument, save, rentTableData }: any) => {
  // rentTableData is the prop that will change
  console.log(rentTableData) // this shows the correct values when the prop changes

  const config = {
    ...
    rentTable: {
      rentTableRenderer: (domElement: any) => {
        console.log('rentTableData in method', rentTableData) // when the prop changes, this value is not updated, it logs the previous value when this is invoked
        ReactDOM.render(<RentTablePreview values={rentTableData} />, domElement)
      },
    },
  }

  return (
    <div className="lease-editor">
      <div className="lease-editor__toolbar" ref={toolbarElem}></div>

      <div className="lease-editor__editable-container">
        {leaseDocument.body && rentTableData && (
          <CKEditor
            editor={Editor}
            isReadOnly={false}
            config={config} // config object feeds in fine during the first render
            data={leaseDocument.body}
          />
        )}
      </div>
    </div>
  )
}

when rentTableData is updated, the value is logged correctly in the component, but when the method is invoked from the config it uses the previous value (what the prop was during first render).

Any ideas on how I can fix this?

question from:https://stackoverflow.com/questions/66052675/react-prop-value-not-updating-in-object-initialization-during-re-render

Answer 1

I don't have any experience with CKEditor, but it probably does not take changes to the config prop into account, which would explain the stale values. You could use useRef (docs) to get rentTableRenderer to use the current value of rentTableData.

Just add a new constant rentTableDataRef and replace rentTableData in the body of the arrow function with rentTableData.current:

export const LeaseEditor = ({ onChange, leaseDocument, save, rentTableData }: any) => {
  // rentTableData is the prop that will change
  console.log(rentTableData) // this shows the correct values when the prop changes
  const rentTableDataRef = useRef(rentTableData)

  const config = {
    ...
    rentTable: {
      rentTableRenderer: (domElement: any) => {
        console.log('rentTableData in method', rentTableDataRef.current)
        ReactDOM.render(<RentTablePreview values={rentTableDataRef.current} />, domElement)
      },
    },
  }