how to map array of array into react native picker

Question

How to map attributes array (which is the sub-array of products)into the picker. Here is my JSON data:

{ "products": [ { "productid": "5466", "name": "Cashew", "description": "", "attributes": [ { "product_id": "5466", "attribute_name": "500 grm", "attribute_price": "500" }, { "product_id": "5466", "attribute_name": "250 grm", "attribute_price": "250" } ] } ] }

here is 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.PickerValueHolder}

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

            {this.state.data.products.attributes.map((item, key) => (
                        <Picker.Item label={item.attribute_name} value={item.attribute_name} key={item} />)
                    )}
            
          </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.products}
            renderItem={this.renderProductsCart}
            keyExtractor={(item, index) => index.toString()}
            numColumns={2}
          />

please help me thanks in advance

Answer 1

I have used the Functional component here but you can use the Class-based component and use it that way too: Output:

Full Example Code:

import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, Picker, FlatList, Button } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const dataP = {
  products: [
    {
      productid: '5466',
      name: 'Cashew',
      description: '',
      attributes: [
        {
          product_id: '5466',
          attribute_name: '500 grm',
          attribute_price: '500',
        },
        {
          product_id: '5466',
          attribute_name: '250 grm',
          attribute_price: '250',
        },
      ],
    },
  ],
};

export default function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    setData(dataP);
  }, []);

  const 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={''}
            onValueChange={(itemValue, itemIndex) => this.setState({})}>
            {item?.attributes.map((item, key) => (
              <Picker.Item
                label={item.attribute_name}
                value={item.attribute_name}
                key={item}
              />
            ))}
          </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>
    );
  };
  return (
    <View style={styles.container}>
      <FlatList
        data={dataP?.products}
        renderItem={renderProductsCart}
        keyExtractor={(item, index) => index.toString()}
        numColumns={2}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Working Expo Snack Demo