How to only show one items details from FlatList? - react-native

Question

I have a database of toys (Database.js), each toy has 8 details (name, image, id, type, seller, short description, and long description). I have a list of toy cards showing on ViewToys.js page, each card shows 5 of those details. Currently, I have it so that when you click on any of these cards, it goes to the SlugProduct.js page, but its currently showing ALL the toys in the database instead of just the selected toys details (I want it to show all 8 details).
Is there a way for me to tweak this code so that it only shows the one items details? I have used keyExtractor (item.id) - would it be possible to tell react native that when this toy is clicked, only the details with the corresponding id is loaded and shown? Or some other method perhaps? I feel like I should be able to do this with useState, but don't know how I would go about doing that.
I'm wanting to pass data from one component to another, so I'll post the components:
This is the component where you would click the toy card and have it navigate to another page (a slug that loads the next component):
import { StyleSheet, Text, View, FlatList } from 'react-native'
import React, {useState} from 'react'
import Toy from './Database'
import ToyCard from './ToyCard'
const FLToyCard = ({navigation}) => {
const [selectedToy, setSelectedToy] = useState(null)
const headerComp = () => {
return(
<View style={{alignSelf: 'center'}}>
<Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
</View>
)
}
const renderMyItem = ({item}) => {
return(
<View style={{flex: 1}}>
<ToyCard
name={item.name}
image={item.image}
price={item.price}
desc={item.desc}
seller={item.seller}
value={selectedToy}
onPress={()=>navigation.navigate('SlugProduct')}
/>
</View>
)
}
return(
<View>
<FlatList
data={Toy}
renderItem={renderMyItem}
keyExtractor={(item)=>item.id}
numColumns={2}
ListHeaderComponent={headerComp}
/>
</View>
)
}
export default FLToyCard
This is the component that would receive the data and format it within itself. Currently the component is being implemented in another component that looks like the above one, hence why its showing all the items in the flatlist.
import { StyleSheet, Text, View, ScrollView, Image, Button, TouchableOpacity } from 'react-native'
import React, { useState, useEffect, useRoute } from 'react'
import { AntDesign } from '#expo/vector-icons'
const SlugFormat = ({name, seller, image, id, type, longDesc, price}) => {
const [quantity, setQuantity] = useState(1);
const addQuantity = () => {
setQuantity(quantity + 1);
};
const minusQuantity = () => {
if (quantity !== 1){
setQuantity(quantity - 1);
}
};
return (
<ScrollView style={{backgroundColor: '#ffce20', height: '100%'}}>
<Image style={styles.toyImage} source={image} />
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={styles.title}>{name} (#{id})</Text>
<Text style={styles.price}>${price}</Text>
</View>
<View styles={{flexDirection: 'column'}}>
<Text style={styles.links}>Seller: {seller}</Text>
<Text style={styles.links}>Type: {type}</Text>
</View>
<Text style={styles.descriptionHeader}>Description</Text>
<Text style={styles.description}>{longDesc}</Text>
</View>
<View>
<View>
<Text>Quantity: </Text>
<View style={styles.quantityFrame}>
<TouchableOpacity onPress={minusQuantity}>
<AntDesign name="minuscircleo" size={35} color="black" />
</TouchableOpacity>
<Text value={quantity} onChangeText={setQuantity} style={styles.quantity}>{quantity}</Text>
<TouchableOpacity onPress={addQuantity}>
<AntDesign name="pluscircleo" size={35} color="black" />
</TouchableOpacity>
</View>
</View>
<Button title='Add To Cart'/>
</View>
</ScrollView>
)
}
export default SlugFormat

Answer 1

I'll try to explain with what I think is a similar example.
To begin with, we would have our component to show each of the cards of the toys
export const ToyCard = ({ name, desc }) => {
return (
<View>
<Text>{name}</Text>
<Text>{desc}</Text>
</View>
)
}
Then, we would have the page to show the details of each toy, for when the user clicks on one of the FlatList items.
export const ToyDetailsPage = ({ name, desc }) => {
return (
<View>
<Text>{name}</Text>
<Text>{desc}</Text>
</View>
)
}
And finally, we have the page where we are showing the list of toys, and from where we are going to pass the parameters to the page that is going to show the details of the toy
const toys = [
{ id: '1', name: 'toy1', desc: 'desc toy1' },
{ id: '2', name: 'toy2', desc: 'desc toy2' },
{ id: '3', name: 'toy3', desc: 'desc toy3' },
{ id: '4', name: 'toy4', desc: 'desc toy4' },
]
export const ToysListPage = () => {
return (
<View>
<FlatList
data={toys}
keyExtractor={(item) => item.id}
renderItem={({ item }) => {
const { id, name, desc } = item;
return (
<TouchableOpacity
onPress={() => navigation.navigate('ToyDetailsPage', { name, desc })}
>
<ToyCard
id={id}
name={name}
desc={desc}
/>
</TouchableOpacity>
);
}}
/>
</View>
)
}
It's a very simple example, but I really hope it can help you with what you plan to do.