Updating the state of an array after search reactjs

Question

I have a three dropdowns country,state,task with some values populated from an array and button for search which works based on the dropdown selection. The first time I choose a value from the task dropdown menu ="verify" the grid(an array of values) is filtered on handlesubmit event but when I reselect another value from the task dropdown ="add" the grid is looking only from the previous filtered list and not returning any records

I think I am unable to reset the array on every submit(handlesubmit is the event I m calling on the button click) of that search button. Below is the code where I need to reset the searchtasks to initiatetasks:

class Initiate extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        var data = [{
            id: 1,
            country: "USA",
            task: "Verify ",
            state: "Alaska"
        },
{
            id: 2,
            country: "USA",
            task: "Add ",
            state: "Delaware"
        },
{
            id: 3,
            country: "USA",
            task: "Verify ",
            state: "Delaware"
        }];

         this.state = {
             searchtasks: data,
             initialstate :data,
            country: Country [0],
            task: Task [0],
            state: States[0]
        };
    }


    handleChange(event) {
         this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();
    this.setstate({searchtasks: this state.initialstate});
        const sa = Country[event.target.ddlcountry.value].label;
        const tt = Task [event.target.ddltask.value].label;
        const st = States[event.target.ddlstates.value].label;
        if (sa !== "Select Country")
        {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.country === sa) });
        }
        if (tt !== "Select Task") {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.task === tt) });
        }
        if (st !== "Select State") {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.state === st) });
        }
        }

    //formats the cost
    priceFormatter(cell, row) {
        return '<i class="glyphicon glyphicon-usd"></i> ' + cell;

    }


    // renders the component
    render() {
        const selectRowProp = {
            mode: "checkbox",
            clickToSelect: true
        };

flppv · Answer 1 · 2019-03-17T05:09:26.243

In this part of code:

// ...
var data = [/* ... */];

this.state = {
  searchtasks: data,
  initialstate :data,
  // ...
};

You're assigning same data array to both state values searchtasks and initialstate. Might be a problem.

Why it happen? Because in Javascript objects are passing by Object reference.

Look at example.

const exampleArray = [1, 2, 3]
const exampleObject = { value1: exampleArray, value2: exampleArray }

exampleObject.value1 // => [1, 2, 3]
exampleObject.value2 // => [1, 2, 3]

exampleObject.value1[0] = 5

exampleObject.value1 // => [5, 2, 3]
exampleObject.value2 // => [5, 2, 3]

So in your case you could do using destructuring assignment:

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    const data = [{
        id: 1,
        country: "USA",
        task: "Verify ",
        state: "Alaska"
    }, {
        id: 2,
        country: "USA",
        task: "Add ",
        state: "Delaware"
    }, {
        id: 3,
        country: "USA",
        task: "Verify ",
        state: "Delaware"
    }];

    this.state = {
        searchtasks: { ...data },
        initialstate: { ...data },
        country: Country[0],
        task: Task[0],
        state: States[0]
    };
}

You should use same approach with all object assignments.

In your handleSubmit() there is a line:

this.setstate({searchtasks: this state.initialstate});

It should be:

this.setstate({ searchtasks: { ...this.state.initialstate } });

Btw, you don't have to use var since you're using modern JS syntax already.

thanks for this i edited my code accordingly but this doesn't solve the problem.i need help with resetting the state when dropdown changes. — Newbie, Mar 17 '19 at 04:53
@arvindreddy Well, you definitely didn't put the whole code in your question. You don't return anything from `render()`, and some parts of your code look wrong, e.g. this `country: Country [0],`. You don't have Country array but assigning value from it. — flppv, Mar 17 '19 at 04:56
Updated the answer. You did same mistake in another place :) Btw it should've raise an error. Have you seen it? — flppv, Mar 17 '19 at 05:09
Well, I believe this error were there before since we didn't change that part. My apologies, but I think that you should learn very basics of JavaScript and React before trying to implement such logic. — flppv, Mar 17 '19 at 05:26

Updating the state of an array after search reactjs

1 Answers1