next.js trouble with cookies - reactjs

Question

I need to save my data from array to cookies, but I have some issues. :)
At the begining here bellow my code:
import { LineChartProps } from "./LineChart.props";
import { Input } from "../Input/Input";
import { Button } from "../Button/Button";
import cookie from "js-cookie";
import React, { useState, useEffect } from "react";
export const LineChart = ({ }: LineChartProps): JSX.Element => {
const [inputValue, setInputValue] = useState("");
const [citiesList, setCitiesList] = useState<string[]>(
(cookie.get("citiesList")?.split(",")) || [
"London",
"Kyiv",
"Los Angeles"
]
);//array in state
const onChange = ((event) => {
setInputValue(event.target.value);
});
const onClick = ((event) => {
setCitiesList((currentArray) => [...currentArray, inputValue])
console.log(citiesList)
});
useEffect(() => {
cookie.set("citiesList", JSON.stringify(citiesList), { path: '' });
}, [citiesList]);
return (
<div>
<Button appearance="primary" onClick={onClick}>click me</Button>
<Input type="text" name="search" onChange={onChange} />
<div>
<p>{inputValue}</p>
</div>
</div>
)
};
To simplify it I'll also add here screenshot of my code:
As you see I have an array with cities. I want to save my array data to cookies, because I use next.js, but not a react.
I have button and input field:
So when I start my app, my array looks like this:
but for example if I reaload the page, I'll see this:
Then if I reload one more time, this:
So, what is better? Prevent cookies.set if all of elements are already in cookies, or there is other (better) solution for this?
And the second problem is: When I add some cities to my cookies Array, at the begining it looks like this:
But if I refresh the page twice, I'll see this:
Do you have any idea?
And if so, thanks in advance! Will be waiting for any solution:)

Answer 1

Try to use JSON.parse instead:
const [citiesList, setCitiesList] = useState<string[]>([]);
useEffect(() => {
const defaultCities = ["London","Kyiv","Los Angeles"]
const cities = cookie.get("citiesList");
if (!cities) {
setCitiesList(defaultCities)
} else {
try {
setCitiesList(JSON.parse(cities))
} catch (err) {
setCitiesList(defaultCities)
}
}
}, [])