I have been trying to bind an array of objects to a SelectionList, and although it seems to be binding, each character is being rendered as an individual list item instead of a single item.
Take a look at my code snippet:
https://i.sstatic.net/Vd6C9.png
r: GetRecipesResponse is a list of objects that I am converting to an array. The issue with rendering can be seen on the right side in the above image.
interface States {
response: GetRecipesResponse;
globalItems: any[];
isModalVisible: boolean;
selectedItem: any;
selectedItemUnit: any;
}
export class MatrixScreen extends BaseNetworkScreen<GetRecipesResponse, Props, States> {
itemWidth: number = 100;
itemMargin: number = 3;
selectedItemsArray: any[];
constructor(props: Props) {
super(props);
this.selectedItemsArray = [];
this.state = {
isLoading: false,
response: null,
globalItems: this.selectedItemsArray,
isModalVisible: false,
selectedItem: null,
selectedItemUnit: null
};
}
}
renderSelectLists(r: GetRecipesResponse): any {
var arr = [];
for (var key in r.data.recipe) {
arr.push(r.data.recipe[key].name);
}
let sections = []
for (const key in this.state.globalItems) {
if (this.state.globalItems.hasOwnProperty(key)) {
sections.push({
data: this.state.globalItems[key],
key: key,
unit: this.state.selectedItemUnit
})
}
}
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={styles.addContainer}>
<Text>Press To Add Item</Text>
<SectionList
sections={[{ data: arr }]}
renderItem={({ item }) => <Text style={styles.SectionListItemS} onPress={this.loadMatrixModal.bind(this, item)}> {item} </Text>}
keyExtractor={(item, index: any) => index}
/>
</View>
<View style={styles.removeContainer}>
<Text>Press To Remove Item</Text>
<SectionList
sections={sections}
renderItem={({ item, index }) => <Text style={styles.SectionListItemS} onPress={this.removeSectionListItem.bind(this, index)}> {item} </Text>}
keyExtractor={(item, index: any) => item}
/>
</View>
</View>
);
}
After defining "sections" and logging it out to the console, it displays as shown in the following image:
https://i.sstatic.net/00gMq.png
Update:
If I include
renderItem={({ item, index }) => <Text style={styles.SectionListItemS} onPress={this.removeSectionListItem.bind(this, index)}> {console.log(item)} {item} </Text>}An interesting output is logged to the console, as depicted below: