Reset the order

[tasugi]

How can I reset the order to the original (= order of the data prop)?

I would like to create like

const reset = () => {
  // reset the order
}
const save = () => {
  // save to remote
}

return (
  <View>
    <Button onPress={reset}>Reset</Button>
    <Button onPress={save}>Save</Button>
    <Sortable.Grid
      data={data}
      renderItem={renderItem}
      columns={1}
    />
  </View>
)

[MatiPl01]

In such as case I suggest that you use the "controlled" sortable component. After each reorder of items you should update the state to reflect the actual order of items. Then you could reset to the initial state by setting the initial data array in state.

Consider this example:

const INITIAL_DATA = <your data array>;

function YourComponent() {
  const [data, setData] = useState(INITIAL_DATA);
  
  const reset = () => {
    setData(INITIAL_DATA)
  }
  
  <Sortable.Grid
    data={data}
    renderItem={renderItem}
    columns={1}
    // You can use the onDragEnd callback to update the state after each re-ordering
    // (see: https://react-native-sortables-docs.vercel.app/grid/props#ondragend)
    onDragEnd{(params) => setData(params.data)}
  />
}

---

Alternatively, if you don't want to update state after each order change, I think that you could just create a copy of the data array and set it in state to trigger the update:

const [data, setData] = useState(<your data array>);

const reset = () => {
  setData([...data])
}

Let me know if it helps!

[tasugi]

@MatiPl01 I have tried it the way you suggest and did what I wanted to do.
Thank you!