Update an array element in React Hookstate - reactjs

Question

I have an application using React Hookstate.
For one state I am using an Array. I want to update a single element in this array.
But the updated element always is wrapped inside a proxy tag.
import React from 'react';
import { useState, none, State } from '#hookstate/core';
const Test: React.FC = () => {
const books: State<Array<any>> = useState([
'Harry Potter',
'Sherlock Holmes',
'Swiss Family Robinson',
'Tarzon',
]);
const SwapItems = () => {
// books.merge((p) => ({ 1: p[0], 0: p[1] })); // this way it works.
const reOrderedItem = books.nested(0);
books.nested(0).set(none);
books.set((p) => {
p.splice(0, 0, reOrderedItem);
return p;
});
};
return (
<div>
<ol>
{books.map((book) => {
return <li>{book.get()}</li>;
})}
</ol>
<br />
<button onClick={SwapItems}>Swap Books</button>
</div>
);
};
export default Test;
//error
react-dom.development.js:11393 Uncaught RangeError: Maximum call stack size exceeded.

Answer 1

I'm pretty sure you just need to add .value as follows:
const reOrderedItem = books.nested(0).value;
I'm not sure why you don't prefer the update version that works though -- that seems much simpler.
Alternatively, if you want to use set, why not work with the items directly?
const reOrderedItem = books.nested(0).value;
books.nested(0).set(books.nested(1).value);
books.nested(1).set(reOrderedItem);
Alternatively, you could do the manipulation inside set like so (but you're right that this is inefficient for large arrays):
const SwapItems = () => {
books.set((p) => {
const [a, b, ...rest] = p;
return [b, a, ...rest];
});
};

Answer 2

Actually, I wanted to reorder a certain item on the list.
import React from 'react';
import { useState, State } from '#hookstate/core';
const Test: React.FC = () => {
const books: State<Array<any>> = useState([
'Harry Potter',
'Sherlock Holmes',
'Swiss Family Robinson',
'Tarzon',
]);
const ReorderItems = () => {
books.set((p) => {
const reOrderedItem = p[2];
p.splice(2, 1);
p.splice(0, 0, reOrderedItem);
return p;
});
};
return (
<div>
<ol>
{books.map((book) => {
return <li>{book.get()}</li>;
})}
</ol>
<br />
<button onClick={ReorderItems}>Swap Books</button>
</div>
);
};
export default Test;