CODEWITHSUNDEEP
reactjs
yongchang
yongchang

Reputation: 522

this.state.items.concat is not a function

What I am trying to do:

Create new element after clearing the field

This is my function for clearing all element

claerAll = () => {
  this.setState({ items: 0 });
};

This is my function to create new element

onAddItem() {
  /*eslint no-console: 0*/

  this.setState({
    // Add a new item. It must have a unique key!
    items: this.state.items.concat({
      id: uuidV4(),
      i: "n" + this.state.newCounter,
      x: (this.state.items.length * 2) % (this.state.cols || 12),
      y: Infinity, // puts it at the bottom
      w: 2,
      h: 2
    }),
    // Increment the counter to ensure key is always unique.
    newCounter: this.state.newCounter + 1
  });
}

Expected result: able to create new element after clearing the field

Actual result: when trying to create new element got error message this.state.items.concat is not a function

will appreciate any help

Click this link for my codesandbox

Upvotes: 1

Views: 651

Answers (2)

Waleed Nasir
Waleed Nasir

Reputation: 607

Just Updated Concat to Assign Form [...item] please try its working Fine :-)

import React from "react";
import ReactDOM from "react-dom";
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";
import "./styles.css";
import { v4 as uuidV4 } from "uuid";

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class MinMaxLayout extends React.PureComponent {
  static defaultProps = {
    className: "layout",
    rowHeight: 50,
    cols: { lg: 1, md: 10, sm: 6, xs: 4, xxs: 2 }
  };

  constructor(props) {
    super(props);

    this.state = {
      items: [0, 1, 2, 3, 4].map(function (i, key, list) {
        return {
          i: i.toString(),
          x: i * 2,
          y: 0,
          w: 1,
          h: 1
        };
      }),
      newCounter: 0
    };

    this.onAddItem = this.onAddItem.bind(this);
    this.onBreakpointChange = this.onBreakpointChange.bind(this);
  }

  // We're using the cols coming back from this to calculate where to add new items.
  onBreakpointChange(breakpoint, cols) {
    // console.log("props ", this.props);
    this.setState({
      breakpoint: breakpoint,
      cols: cols
    });
  }

  createElement(el) {
    const i = el.add ? "+" : el.i;

    return <div key={i} data-grid={el}></div>;
  }

  onAddItem() {
    /*eslint no-console: 0*/

    this.setState({
      // Add a new item. It must have a unique key!
      items: [...this.state.items,{
        id: uuidV4(),
        i: "n" + this.state.newCounter,
        x: (this.state.items.length * 2) % (this.state.cols || 12),
        y: Infinity, // puts it at the bottom
        w: 2,
        h: 2
      }],
      // Increment the counter to ensure key is always unique.
      newCounter: this.state.newCounter + 1
    });
  }

  claerAll = () => {
    this.setState({ items: 0 });
  };

  render() {
    return (
      <div>
        <button onClick={this.onAddItem}>Add Item</button>
        <button onClick={this.claerAll}>Clear All</button>
        <ResponsiveReactGridLayout
          onBreakpointChange={this.onBreakpointChange}
          {...this.props}
        >
          {_.map(this.state.items, (el) => this.createElement(el))}
        </ResponsiveReactGridLayout>
      </div>
    );
  }
}

module.exports = MinMaxLayout;

const rootElement = document.getElementById("root");
ReactDOM.render(<MinMaxLayout />, rootElement);

here is a link

https://codesandbox.io/s/react-grid-layout-forked-i1d7o?file=/src/index.js

Upvotes: 1

Neel Dsouza
Neel Dsouza

Reputation: 1539

You are converting an array to a number. Just assign an empty array to clear the items

claerAll = () => {
    this.setState({ items: [] });
  };

Upvotes: 1

Related Questions