I've created one Demo Application where I've been able to add comments while clicking on the chat icon textarea will be expanded, currently, the functionality is I've created a reference using useRef of that particular text area using unique id, and I'm saving comments to that reference array, & rendering on UI using ref.current Method, everything is working as I expected but when I click on those filter buttons, the reference is getting null! my requirement is even though I do filter comments should be persisted! Any suggestion, Any new Approach except using useRef would be Appreciated! Thanksyou!!

Here's my codesandbox link https://codesandbox.io/s/proud-resonance-iryir7?file=/src/App.js

CodePudding user response：

Your comment ref should only contains comments, not includes textarea element. So you should create a component to handle textarea value

const TextArea = ({ value, handleSaveComment }) => {
  const ref = useRef(null);
  return (
    <>
      <textarea
        placeholder="Enter Here"
        ref={ref}
        defaultValue={value}
      ></textarea>
      <div
        className="save-button"
        onClick={() => {
          handleSaveComment(ref.current.value);
        }}
      >
        Save
      </div>
    </>
  );
};

and use it in table

const handleSaveComment = (fsValidationId, value) => {
    comment.current[fsValidationId] = value;
    setExpandedId((prev) => (prev === fsValidationId ? "0" : fsValidationId));
};

<AccordionDetails>
    <TextArea
        handleSaveComment={(value) =>
           handleSaveComment(row.id, value)
        }
        value={comment.current[row.id]}
    />
</AccordionDetails>

You can check full code in my codesandbox. Hope it help!