reactstrap: DropdownItem not rendering inside map method of array

Question

ISSUE: data inside DropdownItem is not rendering but, all console logs work.

and this same problem is also present inside the table columns.

PS: I strongly think this is about interpolation and react in general and not react-table

this is my complete code

and below are the relevant snippets.

not sure, where I am going wrong.

dropdown

<Dropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
                    <DropdownToggle caret>Ships</DropdownToggle>
                    {measurementsData.map((measurementData) => {
                      console.log(" md:", measurementData);
                      console.log(" md.sites:", measurementData.sites);
                      console.log(
                        " md.sites[0].uuid:",
                        measurementData.sites[0].uuid
                      );
                      console.log(
                        " md.sites[0].siteName:",
                        measurementData.sites[0].siteName
                      );
                      {
                        measurementData.sites.map((site) => {
                          console.log(" site.siteName:", site.siteName);
                          return (
                            <DropdownMenu key={site.uuid}>
                              <DropdownItem>
                                {site.siteName}
                                <DropdownItem divider />
                              </DropdownItem>
                            </DropdownMenu>
                          );
                        });
                      }
                    })}
                  </Dropdown>

table columns

  columns = [
    // * embedding checkbox
    {
      Header: "Select",
      Cell: (row) => (
        <input
          type="checkbox"
          defaultChecked={this.state.checked[row.index]}
          checked={this.state.checked[row.index]}
        />
      ),
    },
    {
      Header: "System",
      accessor: "sites.systems.systemName",
    },
    {
      Header: "Measurement",
      accessor: "sites.systems.measurements.name",
    },
    {
      Header: "Min",
      accessor: "sites.systems.measurements.min",
    },
    {
      Header: "Max",
      accessor: "sites.systems.measurements.max",
    },
    {
      Header: "Avg",
      accessor: "sites.systems.measurements.average",
    },
    {
      Header: "Last",
      accessor: "sites.systems.measurements.last",
    },
    {
      Header: "Bar",
      accessor: "sites.systems.measurements.buckets.values",
      Cell: this.MyCell,
    },
  ];

The Last column of the table has a pie chart, below code is for that.

MyCell({
    value,
    columnProps: {
      rest: { someFunc },
    },
  }) {
    const data = {
      labels: value.map((val, idx) => {
        return idx;
      }),
      datasets: [
        {
          backgroundColor: [
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
          ],
          data: value,
        },
      ],
    };

    return <Pie data={data} />;
  }

Answer 1

first of all you need to put DropDownMenu outside the map function

second you need to somehow flatten your array

var merged = measurementsData.map(md => md.sites);
merged = [].concat(...merged);

and then

              <DropdownMenu>
                {merged.map(site => {
                  return (
                    <DropdownItem key={site.siteName}>
                      {site.siteName}
                    </DropdownItem>
                  );
                })}
              </DropdownMenu>

this should work.

Answer 2

Actually you are using version 6 of react-table, according to docs:

$ yarn add react-table-v6

# or NPM

$ npm install react-table-v6

and then you gotta import the following items:

import ReactTable from 'react-table-v6'
import 'react-table-v6/react-table.css'

for accessors of react-table header you need to change them to make sure they use the value of first index of array:

{
  Header: "System",
  accessor: "sites[0].systems[0].systemName" // note that these are arrays not objects 
},

and that goes for all of the header items.