React Native - How to select multiple items and display them? - react-native

Question

I would like to display selected items, but the situation I have got is not showing images but only the backgroundColor. There is image uri in productData, so I would like to display the uri. Another issue I am having is that the CheckBox is not checked.
My code below :
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 100,
},
topContainer: {
flexDirection: 'row',
marginHorizontal: 15,
paddingBottom: 20,
paddingTop: 10,
borderBottomWidth: 0.5,
borderColor: colors.very_light_pink,
},
iconWrap: {
width: 60,
height: 60,
borderRadius: 6,
backgroundColor: '#cccccc',
alignItems: 'center',
justifyContent: 'center',
marginRight: 5,
},
icon: {
width: 20,
height: 20,
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginHorizontal: 15,
marginBottom: 15,
},
});
const productData = [
{
id: 0,
productName: 'a',
price: 45000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/8211/407/250/73/w/563/8211407250_2_1_1.jpg?ts=1613387641299',
},
{
id: 1,
productName: 'b',
price: 45000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/0526/407/707/2/w/1280/0526407707_6_1_1.jpg?ts=1610451943259',
},
{
id: 2,
productName: 'c',
price: 129000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/0706/442/710/2/w/563/0706442710_2_1_1.jpg?ts=1614254205907',
},
{
id: 3,
productName: 'd',
price: 139000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/0706/431/446/2/w/563/0706431446_2_1_1.jpg?ts=1613386951068',
},
{
id: 4,
productName: 'e',
price: 189000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/4162/536/401/2/w/1280/4162536401_1_1_1.jpg?ts=1613122054256',
},
{
id: 5,
productName: 'f',
price: 89000,
image:
'https://static.zara.net/photos///2021/V/0/2/p/4165/537/430/2/w/563/4165537430_1_1_1.jpg?ts=1613122064808',
},
];
const LiveAddProducts = (props) => {
const [productClicked, setProductClicked] = useState(null);
const [selectedProducts, setSelectedProducts] = useState([]);
useEffect(() => {
if (productClicked !== null) {
setSelectedProducts((prevState) => [
...prevState,
// I believe this should be changed
{ id: prevState.length, image: productClicked },
]);
setProductClicked(null);
}
}, [productClicked]);
console.log(selectedProducts.image);
return (
<View style={[styles.container]}>
<View style={[styles.topContainer]}>
<TouchableOpacity style={[styles.iconWrap]}>
<Image source={assets.live_add_icon} style={[styles.icon]} />
</TouchableOpacity>
{selectedProducts.map((item, index) => (
<TouchableOpacity style={[styles.iconWrap]} key={item.id}>
<Image source={{ uri: productData.image }} style={[styles.icon]} />
</TouchableOpacity>
))}
</View>
<ScrollView style={{ paddingTop: 20 }}>
{productData.map((item, index) => (
<View style={[styles.row]}>
<ProductsList
price={item.price}
image={item.image}
productName={item.productName}
/>
// Any problems here?
<CheckBox
size={20}
onPress={() => setProductClicked(index)}
source={
productClicked === index
? assets.icon_check_on
: assets.checked_off
}
/>
</View>
))}
</ScrollView>
<BottomButton
btnText={'Add Items'}
buttonStyle={{ height: 50, backgroundColor: colors.iris }}
/>
</View>
);
};
LiveAddProducts.propTypes = {};
export default LiveAddProducts;
The image which has problems :

Answer 1

useEffect(() => {
if (productClicked !== null) {
setSelectedProducts((prevState) => [
...prevState,
// I believe this should be changed
{ id: prevState.length, image: productClicked },
]);
setProductClicked(null);
}
}, [productClicked]);
Here, you'd want to replace this with the index of the element
id: prevState.length
Also,
{selectedProducts.map((item, index) => (
<TouchableOpacity style={[styles.iconWrap]} key={item.id}>
<Image source={{ uri: productData.image }} style={[styles.icon]} />
</TouchableOpacity>
))}
Here, the uri should be item.image, as that is where you hold the data for your item when it is rendered in this loop