How to map separate key:values in react-table-v6 row with multiple lines

Question

Hello I have an array of data:

my_tags = [
{
item: 1,
tags:   {name: 'LandingPage', value: 'true'},
        {name: 'Country', value: 'GB'},
        {name: 'Carrier', value: 'Evri'},
        {name: 'EventCode', value: 'Dispatched'},
},
{
item: 2,
tags:   {name: 'LandingPage', value: 'true'},
        {name: 'Country', value: 'USA'},
        {name: 'Carrier', value: 'RoyalMail'},
        {name: 'EventCode', value: 'Dispatched'},
}]

I have a react-table-v6 and trying to put in a each row tags[country.value] and tags[carrier.value]. Just want to have there list of countries and carriesrs. How to do it.

I tryed:

{
   Header: 'Alert tags',
   id: 'tags',
   accessor: (data) => {
      const res = data.tags.map(items => items.tags?.find(i => i?.name === 'Carrier').value);
      console.log('res:', res);
                },
}

But in console.log I have:

[undefined, undefined]  <<< HERE IS PROBLEM

But I tested it it works if we do that. Just why it does not work in react-table-v6 through accessor:

const carriers = data3.map(item => {
  return item.tags.find(tag => tag.name === 'Carrier').value
})
console.log(carriers) //[ 'RoyalMail', 'Evri']

Or I can easy put there for example all names

(accessor: item => (item.tags.map(i => i.name))

score 0 · Accepted Answer · answered Mar 30 '23 at 08:48

I solved my problem, how will be useful for someone.

{
                Header: 'Alert tags',
                id: 'tags',
                accessor: (items) => {
                  const carrierName = items?.tags?.find(i => (i?.name === 'Carrier'));
                  const countryName = items?.tags?.find(i => (i?.name === 'Country'));
                  return [carrierName?.value, countryName?.value].map(i => (
                    i
                      ? (
                        <span
                          key={i}
                          style={{
                            background: '#F5F5F5',
                            width: 'fit-content',
                            border: '1px solid #BEBEBE',
                            borderRadius: '3px',
                            padding: '5px',
                            margin: '0 5px 0 0',
                            textAlign: 'center',
                            overflow: 'hidden',
                          }}
                        >{i}
                        </span>
                      )
                      : ''
                  ));
                  // console.log('res:', res);
                },

How to map separate key:values in react-table-v6 row with multiple lines

1 Answers1