In an attempt to develop a component resembling a transferlist, I have simplified the process substantially for this particular issue.
Consider the following example: the react-admin component receives two inputs - a subset of selected items record[source] (where source refers to a property on the record object, specific to react-admin), and a list containing all potential items allItems.
The objective is to showcase two lists within the component: one featuring the selected items, and another displaying the items that are NOT selected. The selected items list is provided, while the list of NOT selected items is determined by filtering all items and excluding those already selected.
Despite my efforts, which may be hindered by my limited experience with JavaScript/React, I am encountering difficulties in achieving the desired outcome.
The issue lies in the fact that although theleft variable is functioning correctly and showcasing the selected items, the right variable appears to remain empty, despite confirming that the unselected variable contains the intended list when initializing useState(unselected).
Please note: the items are simply strings, and it is evident that the unselected variable does contain the appropriate items. Hence, the problem seems to be rooted in handling state rather than generating the unselected list.
I believe I may have reached the limits of my understanding regarding React/Redux states. Any guidance or suggestions would be greatly appreciated!
import React, { useState } from 'react';
export const TransferList = ({record, source, allItems}) => {
var unselected = allItems.filter(name => !(record[source].includes(name)));
const [left, setLeft] = useState(record[source]);
const [right, setRight] = useState(unselected);
return (
<div>
Selected:
<ul>
{ left.map(s => <li>{s}</li>) }
</ul>
Unselected:
<ul>
{ right.map(s => <li>{s}</li>) }
</ul>
</div>
);
}