[FIXED] How do I update the textarea using useState?

Issue

I have a textarea array with values that can be updated. The text values in the array are updated when text is entered into the textarea. The array can also be updated externally. The problem is that Textarea doesn't want to update its values with setState() like regular text does.

export function GameActions({}) {
  const [array, setArray] = useState<Type>([]);
  const changeText = (id: number, text: any) => {
    actions[id].text = text;
    setActions(actions);
  };

  return {actions.map((action, index) => (<Textarea
                          defaultValue={action.text}
                          onChange={(e) =>
                            changeText(index, e.currentTarget.value)
                          }
                        />))};
};

Solution

Provided actions is an array state property, it should be:

setActions((actions)=>{
    return actions.map((act,i)=>{
        if(i == id) {
            act.text = text;
        }
        return act;
    });
});

When a state property is updated using its previous value, the callback argument should be used.

Also, to update an element of a state array, map should be used, rather than the indexation operator [].

Please read this article, to learn how to update state arrays.

Answered By - Nice Books
Answer Checked By - - Katrina (ReactFix Volunteer)