this is my homePage

as you can see I have some items and a button that I use to add them to the chartScreen, which is chartScreen , I'm using context api to store items in cartContext.js where each item has its own key to make things easier but I cannot correlate the logic for how to assign each item to the button so whenever I press the button its own item gets added to the chartScreen.

const CartContext = createContext();

export function CartProvider({ children }){
    const [items, setItems] = useState(
        [
          {
            title: "Pınar",
            text: "Pınar Klasik Dana Sucuk (225g)",
            pic: <Image
              style={styles.image1}
              source={require("./Images/klasik_dana_sucuk_paket.png")} />,
            key: 1,
          },
          {
            text: "Pınar Uzun Sosis (225g)",
            pic: <Image
              style={styles.image1}
              source={require("./Images/pinar_uzun_sosis.png")} />,
            key: 2,
          },
        ]
  const [store, setStore] = useState([]);

  const addToCart = (text) => {
    setStore((prevState) => [
        ...prevState, 
        text,
    ]);
  }

return (
    <CartContext.Provider value={{items,setItems, addToCart, store}}>
        {children}
    </CartContext.Provider>
)

I found a cheeky way to send a specific item from addButton.js

const AddButton = () => {
 const { items } = useContext(CartContext);
  const { addToCart } = useContext(CartContext);

  return (
    <TouchableOpacity style={styles.button} onPress={() => addToCart(items[0])}>
        <Text> </Text>
    </TouchableOpacity>
  )
}

and in the chartScreen I view it just like this

 const ChartScreen = () => {
  const { store } = useContext(CartContext);

  if(store.length != 0) {
        return (
          <FlatList 
          data={store}
          renderItem={({ item }) => (
            <View style={styles.listItem}>
              <Text style={styles.itemText}>{item.pic} {item.text}</Text>
            </View>
          )}
        />
        )
      }

this is for sure not even the wrong way to achieve the goal so can you help me?

CodePudding user response：

You can import your button and make it common for all the items, and pass the value to it.
Here is your button code

const AddButton = ({item}) => {
 const { items } = useContext(CartContext);
  const { addToCart } = useContext(CartContext);

  return (
    <TouchableOpacity style={styles.button} onPress={() => 
           addToCart(item?.text)}>
        <Text> </Text>
    </TouchableOpacity>
  )
}

Here you can make button for all you item

  const ChartScreen = () => {
  const { store } = useContext(CartContext);

  if(store.length != 0) {
        return (
          <FlatList 
          data={store}
          renderItem={({ item }) => (
            <View style={styles.listItem}>
              <Text style={styles.itemText}>{item.pic} {item.text}</Text>
            <AddButton item={item} />
            </View>
          )}
        />
        )
      }