Not able to setstate with respect to array of objects: React JS

Question

I am trying to map few fields in array of objects, here in this case it is fieldnames and sort order.

I am trying to achieve server side sorting functionality where in the server takes the field name and sort type whenever I click on a field. I just need to map the field names with the sort type(ASCENDING or DESCENDING) .

I have written a sample where I am maintaining a sample array of objects with type. And on click of that column need I need to decide its sorting order

Can someone help here , Just need to achieve the tagging of sort order with the field name

Sandbox: https://codesandbox.io/s/hopeful-wescoff-08x8x

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";

interface IState {
  sorting: any;
}
interface IProps {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      sorting: [{ firstName: "" }, { lastName: "" }]
    };
  }

  sortHandler = name => {
    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
      if (key === name) {
        obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
      } else {
        obj[key] = "";
      }
      return obj;
    }, {});

    this.setState({ sorting }, () => console.log(this.state.sorting));
  };

  render() {
    return (
      <div>
        <span onclick={this.sortHandler("firstName")}> FirstName</span>
        <span onclick={this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }
}

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

Hi vjr, please try my solution below and let me know if that helps :) — Cat_Enthusiast
– Cat_Enthusiast, Commented Jul 28, 2019 at 8:11

Cat_Enthusiast · Accepted Answer · 2019-07-28 09:43:02Z

5

Your click-handlers get executed immediately on render and with the logic you have constructed this will cause the "Maximum update depth exceeded" error.

Pass an anonymous function that will call your sortHandler instead. This will make it so the sortHandler only gets executed when the user clicks the span:

  render() {
    return (
      <div>
        <span onclick={() => this.sortHandler("firstName")}> FirstName</span>
        <span onclick={() => this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }

See sandbox for example on how to sort by fieldnames: https://codesandbox.io/s/vigilant-haslett-c2z3f

edited Jul 28, 2019 at 9:43

answered Jul 28, 2019 at 8:09

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

joy08 Over a year ago

Thanks much.. Now the next part is tagging the field name with the sort order.. Would you help me with this?

Cat_Enthusiast Over a year ago

Sure I can take a look :)

joy08 Over a year ago

I have got a list of field names.. I need to maintain a map of sort order with respect to each field name.. Whenever I click on that field, i should get either ASCENDING or DESCENDING along with that field :)

Cat_Enthusiast Over a year ago

@vjr gotcha. I legit just spent the past half hour creating a prototype on how you can sort items by the field names. Try it out and let me know what you think. codesandbox.io/s/vigilant-haslett-c2z3f

Cat_Enthusiast Over a year ago

@vjr hmmm but then how would you change sorting by a different field :o

|

kuhandran samudra pandiyan · Accepted Answer · 2019-07-28 08:29:14Z

import React from "react";
import ReactDOM from "react-dom";
//import { render } from "react-dom";

interface IState {
  sorting: any;
}
interface IProps {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      sorting: [{ firstName: "" }, { lastName: "" }]
    };
  }

  sortHandler = (name => {
    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
      if (key === name) {
        obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
      } else {
        obj[key] = "";
      }
      return obj;
    }, {});

    this.setState({ sorting }, () => console.log(this.state.sorting));
  });

  render() {
    return (
      <div>
        <span onclick={() => this.sortHandler("firstName")}> FirstName</span>
        <span onclick={() => this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }
}

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

Few Highlighted issue on your code, please do not import the code if you're not using which can consume memory.

Arrow function dedicated to using the function on the scope. Please check the scope of the variable if the variable required bind with scope

    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {

Please make sure the calling function also requires the scope this to the function. I hope your problem is solved by the initial solution. its just additional notes

Thanks man! There's one more issue I'm having which I've already highlighted with respect to tagging

Collectives™ on Stack Overflow

Not able to setstate with respect to array of objects: React JS

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related