How to pre select items in react-native-sectioned-multi-select?

I'm using a multiple selection list to React Native. It is react-native-sectioned-multi-select.

I used it to input data to form. When inserting data using the selection list, it works fine. No problem. Now, I need to edit form. So, when I load the form, it does not load selected items to the selection list. I used onSelectedItemsChange to load data. But, I'm getting an error. Instead of automatically calling that function, if I call the function using a button, it loads selected items. But, I need to do it without manually clicking a button.

Here is my code regarding the multiple select.

 <SectionedMultiSelect items={this.state.items} uniqueKey="id" subKey="subItem" selectText="Select" confirmText="Select" searchPlaceholderText="Search" removeAllText="Clear all" showDropDowns={true} readOnlyHeadings={true} showCancelButton={true} showRemoveAll={true} onSelectedItemsChange={this.onSelectedItemsChange} selectedItems={this.state.selectedItems}
onSelectedItemsChange = (selectedItems) => { this.setState({ selectedItems});
};

When I try to automatically setState of selectedItems it gives the error. But, if I set the state of selectedItems by a button press, it works and selected items are displayed.

Can anyone help me in this case?

onSelectedItemsChange

1 Answer

You need to save the items in async storage. When you edit the form get the items storage and add them to selectedItems array.

for example

storage.js

// create function for saving items to storage
export const SaveItem = async (key, value) => { try { await AsyncStorage.setItem(key, value); console.log('saved'); } catch (e) { console.log(e); }
};
// create function for saving items to storage
export const ReadItem = async key => { try { var result = await AsyncStorage.getItem(key); return result; } catch (e) { return e; }
};

and use the functions to read and save data, using each forms name as a key. like SaveItem('form1', [23,34,45]). Import the functions in your components.

import { SaveItem, ReadItem } from './storage';
// get items for a form
editForm = key => { ReadItem(key).then(res => { const selected = JSON.parse(result); this.setState({ selectedItems: selected }); });
};
// save form data using each forms name
saveItems = (key, value) => { const items = JSON.stringify(value); SaveItem(key, items) .then(res => { console.log('saved', res); }) .catch(e => console.warn(e));
};