I want to add a value in array coming from API in React Native
Question
I'm trying to change the Text on Button .It can be either "Joined" or "Join" . Here is the API response.I've to match the "group_id" from GroupUsers .If it matched then text should be Joined and vice versa.
{
"GroupUsers": [
{
"group_user_status": "1",
"group_id": "35"
},
{
"group_user_status": "1",
"group_id": "50"
},
{
"group_user_status": "1",
"group_id": "49"
},
{
"group_user_status": "1",
"group_id": "51"
},
{
"group_user_status": "1",
"group_id": "46"
},
{
"group_user_status": "1",
"group_id": "48"
},
{
"group_user_status": "1",
"group_id": "47"
},
{
"group_user_status": "1",
"group_id": "52"
},
{
"group_user_status": "1",
"group_id": "40"
},
{
"group_user_status": "1",
"group_id": "37"
},
{
"group_user_status": "1",
"group_id": "55"
},
{
"group_user_status": "1",
"group_id": "56"
},
{
"group_user_status": "1",
"group_id": "57"
},
{
"group_user_status": "1",
"group_id": "59"
},
{
"group_user_status": "1",
"group_id": "60"
},
{
"group_user_status": "1",
"group_id": "63"
}
],
"groups": [
{
"group_id": "62",
"group_title": "Hxndhdjdnd",
"group_type": "Private",
"group_tags": "Hxnsgsh, gsmsgsu, ",
"group_icon_image": "uploads/groups/IMG-20200509-WA00142.jpg",
"group_cover_image": "uploads/groups/IMG-20200509-WA00131.jpg",
"group_description": "Vdjshskshs",
"group_created_user_id": "58",
"group_creation_date": "2020-05-09 23:53:36",
"group_updation_date": "2020-05-09 23:53:36",
"followers": "1"
},
{
"group_id": "61",
"group_title": "Lhzgkxyd",
"group_type": "Closed",
"group_tags": "Gkjiif, ifjf, ifc",
"group_icon_image": "uploads/groups/IMG-20200509-WA00141.jpg",
"group_cover_image": "uploads/groups/IMG-20200509-WA0013.jpg",
"group_description": "Fkjfnxpjpfldyg",
"group_created_user_id": "58",
"group_creation_date": "2020-05-09 23:46:07",
"group_updation_date": "2020-05-09 23:46:07",
"followers": "1"
},
{
"group_id": "58",
"group_title": "This is APi group",
"group_type": "Closed",
"group_tags": "api , resFull api",
"group_icon_image": "uploads/groups/Screenshot_20200506_180140_com_huawei_android_launcher1.jpg",
"group_cover_image": "uploads/groups/IMG-20200505-WA00023.jpg",
"group_description": "Bxdnhdhdf",
"group_created_user_id": "58",
"group_creation_date": "2020-05-08 17:29:54",
"group_updation_date": "2020-05-08 17:29:54",
"followers": "1"
},
{
"group_id": "54",
"group_title": "APi group",
"group_type": "Public",
"group_tags": "api , resFull api",
"group_icon_image": "uploads/groups/High-level-overview-of-Docker-architecture7.png",
"group_cover_image": "uploads/groups/coverbestads-16.jpg",
"group_description": "This group is created from api request",
"group_created_user_id": "32",
"group_creation_date": "2020-05-07 00:07:41",
"group_updation_date": "2020-05-07 00:07:41",
"followers": "1"
},
{
"group_id": "53",
"group_title": "APi group",
"group_type": "Public",
"group_tags": "api , resFull api",
"group_icon_image": "uploads/groups/High-level-overview-of-Docker-architecture6.png",
"group_cover_image": "uploads/groups/coverbestads-15.jpg",
"group_description": "This group is created from api request",
"group_created_user_id": "32",
"group_creation_date": "2020-05-07 00:05:34",
"group_updation_date": "2020-05-07 00:05:34",
"followers": "0"
},
{
"group_id": "50",
"group_title": "Freelance Pakistan",
"group_type": "Public",
"group_tags": "freelance,freelancer,fiverr,guru.com,upwork,peopleperhour",
"group_icon_image": "uploads/groups/download1.jpg",
"group_cover_image": "uploads/groups/unnamed.png",
"group_description": "This is a group related to freelancing . Here you will get all kind of information about getting project on freelancer,fiverr,upwork and guru.com",
"group_created_user_id": "32",
"group_creation_date": "2020-02-14 04:03:58",
"group_updation_date": "2020-02-14 04:03:58",
"followers": "5"
},
{
"group_id": "49",
"group_title": "CSS (Federal Service Commission ) Past Papers",
"group_type": "Public",
"group_tags": "",
"group_icon_image": "uploads/groups/css-exam-truehelpers.jpg",
"group_cover_image": "uploads/groups/css-group-covr.jpg",
"group_description": "CSS (Federal Service Commission ) Past Papers 2017,2018,2019,2020\r\nCSS Stand for Central Superior Service Exam is conducted by FPSC for the recruitment of BS-17 under the following department.\r\n1.Commerce and Trade Service\r\n2.Custom and Excise Service\r\n3.District Management Group\r\n4.Foreign service of Pakistan\r\n5.Income Tax group etc",
"group_created_user_id": "23",
"group_creation_date": "2020-02-13 22:15:51",
"group_updation_date": "2020-02-13 22:15:51",
"followers": "3"
},
{
"group_id": "48",
"group_title": "BISE Lahore Board Matric Part 1 2, SSC, 9th & 10th Class Past Papers 2020",
"group_type": "Public",
"group_tags": "",
"group_icon_image": "uploads/groups/BISE-Lahore-fa-fsc-result.gif",
"group_cover_image": "uploads/groups/download.png",
"group_description": "BISE Lahore Board past paper SSC, Matric Part 1 2, 9th & 10th, Annual & Supply Classes 2020. Download annual and supply biselahore exam old past paper of all 9th, 10th, 11th, 12th, SSC, HSSC, FA, FSC, Matric, Inter, Intermediate, SSC Part 1, SSC Part 2, Inter Part 1, Inter part 2, 1st year, 2nd year classes today online from biselahore.com BISE Lahore Board.",
"group_created_user_id": "23",
"group_creation_date": "2020-02-13 06:19:07",
"group_updation_date": "2020-02-13 06:19:07",
"followers": "2"
},
{
"group_id": "47",
"group_title": "AIOU B.ED (1.5 years and 2.5 years) Assignments and solved papers 2020",
"group_type": "Public",
"group_tags": "",
"group_icon_image": "uploads/groups/AIOU_(1).jpg",
"group_cover_image": "uploads/groups/AIOU_(1)1.jpg",
"group_description": "AIOU B.ED (1.5 years and 2.5 years) Assignments and solved papers 2020",
"group_created_user_id": "23",
"group_creation_date": "2020-02-08 23:05:13",
"group_updation_date": "2020-02-08 23:05:13",
"followers": "2"
},
{
"group_id": "46",
"group_title": "Poetry",
"group_type": "Public",
"group_tags": "",
"group_icon_image": "uploads/groups/16508247_1003789546393029_6568778440276501395_n.jpg",
"group_cover_image": "uploads/groups/16426143_735405959948916_604726409981539585_n.jpg",
"group_description": "My Best Poetry in World",
"group_created_user_id": "81",
"group_creation_date": "2020-02-02 01:20:59",
"group_updation_date": "2020-02-02 01:20:59",
"followers": "2"
}
]
}
here is what I'm tring to do.
await this.props.getGroups(this.state.pageNum);
if (this.props.isSuccess) {
this.setState({
groups: this.props.groups.map(item => {
this.props.GroupUsers.filter(group_id === item.group_id)
return {
...item,
joined: false,
};
}),
loading: false,
});
}
** I want to add joined: false or true in groups array coming from api and storing into state array**
1 answers
solution1
0 2020-05-10 10:02:24
Try like this, this might help you.
this.setState({
groups: this.props.groups.map(item => {
let matchedGroupId = this.props.GroupUsers.filter(
groupUser => groupUser.group_id === item.group_id
);
item.joined = matchedGroupId.length !== 0 ? true : false;
return item;
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I find particular value from array in react native
react I want to add a state to the array
How to add pagination in react native from api
I want to return images in flatlist from an array that contians links/urls for images react-native
How can i display images in React coming from api
I want to add an value to an array, trying using splice, but it want work?
I want to select value from react select
how to filter and add conditional statements of the data coming from json local file in react native using map
i want to fetch file from server and then display in browser using react js(file is coming from server as response)
I need to add separate radio button for every item that comes from API in React native
Related Tags