react js iterate over array in Component props

Question

I got a component where I need to pass data, searched in array. The array is stored in variable, and the data needs to go to Component prop. Consider the following;

const users = [
   {"id": 1, "username": 'name1'},
   {"id": 2, "username": 'name2'},
   {"id": 3, "username": 'name3'},
   {"id": 4, "username": 'name4'},
   {"id": 5, "username": 'name5'}
]

const listItemData = [1,2,3];

<List
    size="small"
    bordered
    dataSource={listItemData}
    renderItem={item => <List.Item>{item}</List.Item>}//need name1, name2, name3 but get 1,2,3 here
/>

So here I have an array of users where all data about all users is stored, and array of particular list items where I have only ids. For rendering purposes I need to render usernames instead of ids. As far as I know I could iterate through user ids in components renderItem prop and show username of user that matches its id with id from listItemData.

Any ideas how to do that would be welcome. Thank you

share the code for list component

vinayak shahdeo
– vinayak shahdeo

2020-01-27 18:42:18 +00:00
Commented Jan 27, 2020 at 18:42 — vinayak shahdeo
– vinayak shahdeo, Commented Jan 27, 2020 at 18:42
its a Component from here: ant.design/components/list

Masha
– Masha

2020-01-27 18:46:35 +00:00
Commented Jan 27, 2020 at 18:46 — Masha
– Masha, Commented Jan 27, 2020 at 18:46

technophyle · Accepted Answer · 2020-01-27 19:12:15Z

1

const users = [
  {"id": 1, "username": 'name1'},
  {"id": 2, "username": 'name2'},
  {"id": 3, "username": 'name3'},
  {"id": 4, "username": 'name4'},
  {"id": 5, "username": 'name5'}
];

const ids = [1,2,3];

const listItems = users.reduce((a, c) => {
  a[c.id] = c.username;
  return a;
}, {});

<List
  size="small"
  bordered
  dataSource={ids}
  renderItem={id => <List.Item>{listItems[id]}</List.Item>}
/>

answered Jan 27, 2020 at 19:12

technophyle

9,3677 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vinayak shahdeo Over a year ago

sorry, but your logic is wrong if the array is not in series your logic would fail. var users = [ {"id": 10, "username": 'name1'}, {"id": 9, "username": 'name2'}, {"id": 0, "username": 'name3'}, {"id": 4, "username": 'name4'}, {"id": 5, "username": 'name5'} ]; var ids = [1,2,3]; var listItems = users.reduce((a, c) => { a[c.id] = c.username; return a; }, {});//{0: "name3", 4: "name4", 5: "name5", 9: "name2", 10: "name1"} which is wrong and yields wrong result

technophyle Over a year ago

if the input is wrong, I don't think it's a huge problem displaying a blank item. wrong input, wrong result. it's okay as long as it doesn't break.

vinayak shahdeo Over a year ago

It is a test case and it should be considered. Your whole assumption is based on the input serial which is not asked in the question

technophyle Over a year ago

it can be considered by the OP easily. for example, he can add || N/A in the renderItem method. that's not the point of the question.

vinayak shahdeo · Accepted Answer · 2020-01-27 18:58:31Z

0

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { List, Avatar } from 'antd';

const users = [
  {"id": 1, "username": 'name1'},
  {"id": 2, "username": 'name2'},
  {"id": 3, "username": 'name3'},
  {"id": 4, "username": 'name4'},
  {"id": 5, "username": 'name5'}
]

const listItemData = [1,2,3];


const data = users.filter((user)=>listItemData.includes(user.id))
ReactDOM.render(
  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta          
          title={<a href="https://ant.design">{item.username}</a>}          
        />
      </List.Item>
    )}
  />,
  document.getElementById('container'),
);

You need to filter out the values and then set that as new data source. By the way in your code you took wrong datasource. First filter out matching data and then it works like a charm!!!

answered Jan 27, 2020 at 18:58

vinayak shahdeo

1,5382 gold badges14 silver badges23 bronze badges

5 Comments

Masha Over a year ago

is it possible to do the same withut changing the data source. I am getting the data source from the state, and unfortunately I cannot change it to array of objects, I get only array of integers. Thank you

vinayak shahdeo Over a year ago

the component iterates over data source if that is not correct then how will you get correct data. your array would always contain [1,2,3]. You need to make source correct.

vinayak shahdeo Over a year ago

you can simply copy and paste this code in codesandbox.io/s/3052nky8q and check what I am trying to tell you.

technophyle Over a year ago

FWIW, includes doesn't work with IE. better to use indexOf

vinayak shahdeo Over a year ago

FYI react js code has inbuilt babel to execute this regardless of browser

Collectives™ on Stack Overflow

react js iterate over array in Component props

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related