How to combine different picker values for same name of the flatlist in React Native

Question

I m retrieving some JSON data which has more than 2 attributes for the same item as follows into Picker in React Native Flatlist:

    {"products":
       [
        {
           "name": "Dried Blueberry",
           "weight": "1000gm",
           "price": "200"
        },
        {
          "name": "Dried Blueberry",
          "weight": "500gm",
          "price": "100"
        },
        {
          "name": "Dried Blueberry",
          "weight": "250gm",
          "price": "50"
        }
       ]
    }

It is displaying as shown in this

But I want to display it as this

Anyone will help me?

Here's my code:

renderProductsCart = ({ item }) => {
    return (
      <View style={{ width: "46%", marginLeft: 10, marginTop: 10 }}>
        <Card
          elevation={2}>
          <Card.Cover source={{ uri: item.image }} />
          <Text style={{ marginLeft: 5 }}>{item.name}</Text>
          <Text> ₹: {item.attribute_price}/- </Text>
          <Picker
            selectedValue={this.state.data}

            onValueChange={(itemValue, itemIndex) => this.setState({ data: itemValue })} >

            {/* {this.state.city.map((item, key) => (
                        <Picker.Item label={item.name} value={item.name} key={key} />)
                    )} */}
            <Picker.Item label={item.attribute_name} value={item.attribute_name} />
          </Picker>
          <View style={{ flexDirection: "row" }}>
            <Card.Actions>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>View More</Button>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>Cart</Button>
            </Card.Actions>
          </View>
        </Card>
      </View>
    )
  }

<FlatList
data={this.state.data.attributes}
renderItem={this.renderProductsCart}
keyExtractor={(item, index) => index.toString()}
numColumns={2}
/>

Answer 1

as mentionned by Aymen Guidad, you must massage your data to an object containing an array of values.

Using reduce, it can be achieved like so:

const data = [
  { name: 'Dried Blueberry', weight: '1000gm', price: '200' },
  { name: 'Dried Blueberry', weight: '500gm', price: '100' },
  { name: 'Dried Blueberry', weight: '250gm', price: '50' },
];

const products = data.reduce((acc, curr) => {
  const currentValue = acc[curr.name] || []

  acc[curr.name] = [...currentValue, { weight: curr.weight, price: curr.price }]

  return acc
}, {})

Now, on React, you must pass that to FlatList, except it expects an array, so you must do something like outline in this question: React Native FlatList with object

You can map normally over your array in your Picker.

Answer 2

Theres a few things you can try here.

A) Setting a pre-defined width for the card ( Maybe equal to the height you've set? ). Then you can use alignItems in order to have the card positioned in the middle or on the left - Unsure as to which you wanted here.

B) If there are an even number of cards, you could add an empty View at the end in order to fill this space. I find this method pretty clunky but useful when trying to leave space for future elements.

C) Simply use alignItems: 'space-between, I like to use this to center items, but you would have to define the width

Answer 3

it seems you need to edit your retrieved data which each name has its weights and prices. try to use map and reduce functions.

finally, your data should be like this.

{
  ...
   "Dried Blueberry": [ {"weight": "1000gm", "price": "200"},
                        {"weight": "500gm", "price": "100"},
                        {"weight": "250gm", "price": "50"} 
                      ]
 ...
}