In react with hooks, how to append to a state to create a history

Question

I'm still learning react, so this may just be because I don't fully understand what I'm doing yet. The formattedText field is just a temporary text that the user creates from a button click. I want to create a running history of this field, so I created historyText.

function App() {
  const [formattedText, setFormattedText] = useState([]);
  const [historyText, setHistoryText] = useState([]);

In my button click action, I'm setting the formattedText:

setFormattedText(tempComp);

And I thought I could just append it to my history:

setHistoryText(historyText+tempComp);

But it doesn't work, all I get is [object Object],[object Object],[object Object],[object Object],[object Object] as my output.

** Clarification: the reason this may look strange because I'm storing html in the strings and wanted it to show as html. Here's how I'm building tempComp:

tempComp.push(<p><b>{dResult[y].dp5}</b></p>);

Different lines are formatted differently, so I couldn't just use a split to add in a <p> for example.

Use `setHistoryText([...historyText, tempComp]);` (this will append the value to the array) — ChrisG, Dec 24 '19 at 14:00
@ChrisG, your suggestion worked. Now its showing a running log of what I want. Can you post it as an answer so I can accept it? — baumli, Dec 24 '19 at 14:17
I've marked this as a duplicate instead, since it is :) (I didn't downvote though) — ChrisG, Dec 24 '19 at 14:17

score -1 · Answer 1 · answered Dec 24 '19 at 13:55

-1

This happens because, ou are not using String values but an Object and the default string representation of an object is just [object Object]. I'm not totally sure, what you want to add to read more here.

setHistoryText(historyText+tempComp);

but maybe try to console.log the objects out first, and see if maybe you where meant to access an attribute instead

//other logic
console.log(historyText) //do you mean to access a value on the object instead?
console.log(tempComp)
setHistoryText(historyText+tempComp);

answered Dec 24 '19 at 13:55

Dedi

2,812
3
22
55

This isn't an answer, you haven't fixed the OP's code. Explaining what the problem is isn't enough, you need to show how to fix it. – ChrisG Dec 24 '19 at 14:13
well without more information, and can't be fixed. – Dedi Dec 24 '19 at 15:43
My comment fixed it for OP, and it's a dupe anyway. So how can't this be fixed...? – ChrisG Dec 24 '19 at 23:55

In react with hooks, how to append to a state to create a history

1 Answers1