Iterating over data and displaying div gives values.map is not a function-CodePudding

I want to iterate over an array of objects and dislpay a div for each record with the data. Currently iterating over the collection retuns the following error:

values.map is not a function

And I can't figure out why. What am I doing wrong here and how can I render the div wi the data succesfully?

Here is my main.jsx:


import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Pager } from '@progress/kendo-react-data-tools';
import { DemoConfigurator } from './configurator';
import { products } from './products';
const total = products.length;
const pageSizes = [5, 10, 20];
const initialType = 'numeric';
const initialPageState = {
  skip: 0,
  take: 5,
  buttonCount: 5,
  type: initialType,
  info: true,
  pageSizes: true,
  previousNext: true,
  responsive: true,
};
const App = () => {
  const [pageState, setPageState] = React.useState(initialPageState);
  let { skip, take, ...rest } = pageState;
  const handlePageChange = (event) => {
    const { skip, take } = event;
    setPageState({
      ...pageState,
      skip: skip,
      take: take,
    });
    console.log(`Page Change: skip ${skip}, take ${take}`);
  };
  console.log(products.slice(skip, skip   take));
  return (
    <React.Fragment>
      <DemoConfigurator
        onChange={(data) =>
          setPageState({
            ...pageState,
            ...data,
          })
        }
        values={rest}
      />
      <Pager
        skip={skip}
        take={take}
        total={total}
        buttonCount={pageState.buttonCount}
        info={pageState.info}
        type={pageState.type}
        pageSizes={pageState.pageSizes ? pageSizes : undefined}
        previousNext={pageState.previousNext}
        onPageChange={handlePageChange}
      />
    </React.Fragment>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

And here is how I iterate over the collection:


import * as React from 'react';
export const DemoConfigurator = (props) => {
  const values = props.values;
  console.log(values);
  return (
    <div>
      {values.map((item) => {
        return (
          <div key={item.Title}>
            <h2>subtitle: {item.Subtitle}</h2>
            <h2>date: {item.Date}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
};

Here is a reprodicble example:

https://stackblitz.com/edit/react-ubga18?file=app/main.jsx,app/configurator.jsx,app/products.js

CodePudding user response：

You are trying to map and object not an array. For that:

Instead of this:

{values.map((item) => {
        return (
          <div key={item.Title}>
            <h2>subtitle: {item.Subtitle}</h2>
            <h2>date: {item.Date}</h2>

            <hr />
          </div>
        );
      })}

Do This:

{Object.keys(values).map((item) => {
            return (
              <div key={item.Title}>
                <h2>subtitle: {item.Subtitle}</h2>
                <h2>date: {item.Date}</h2>
    
                <hr />
              </div>
            );
          })}