reactjsarraysfindmappingreact-table-v6

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


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))

Solution

  • 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);
                    },