After retrieving an array of items from an Object, I noticed that the array contains 5 items. Here is a snapshot of how it looks:
https://i.sstatic.net/RgTtH.jpg
For storage, I have placed the array in my state as:
this.state={
serviceDetails: planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name)),
}
Now, my goal is to render the array in my component using the map function:
{
this.state.serviceDetails.map((serviceName) => {
return (
<SelectableChips initialChips={serviceName} />
);
})
}
However, the issue I'm facing is that all the arrays are rendering in the same location, as shown below:
https://i.sstatic.net/sNGM9.jpg
What I expect is for each "See more" to appear in its respective section - first "See more" with the first section, second "See more" with the second section, and so on.
The complete code for this component is provided below:
//This is an example code for FlatList//
import React from 'react';
import {
StyleSheet, FlatList, Text, View, Alert , Image, TouchableOpacity
} from 'react-native';
import SelectableChips from '../../../components/Chip/SelectableChips';
import CheckBox from '../../../components/CheckBox';
import propTypes from 'prop-types';
import Service from './Service';
import { planDetails } from '../../../api/mockedData/PlanServiceDetails';
class Selected_Items_Array {
constructor() {
...
}
...
}
export default class Services extends React.Component {
...
}
If anyone can provide guidance on how to proceed, I would greatly appreciate it.