Remove all the elements of the array in React JS

Question

I have written a function which is triggered by a dropdown list's onChange event. Once the function is triggered, it load data from rest API according to the parameter value. However, the array which I have used to store those data is not cleared in the subsequent dropdown change events. As a result, when the user change the dropdown multiple times, the array grows with its previously loaded data.

for example: In first drop down change => ['A','B','C'] 2nd drop down change => ['A','B','C','E','F','G'] instead of ['E','F','G']

My code is as follows:

onDropdownChange = (e) => {
    var newArray = [];

// To remove all the elements of newArray
    newArray.forEach((e1,idx, arr) => {
      
        newArray.splice(idx,1);
      
    });

    console.log(newArray);
    const url = 'https://abcdefgh...../' + e + '/readings?today';
    newArray = this.state.data.slice();
    axios.get(url).then(res => {
      var response_arr = res.data.items;
      res.data.items.forEach((item, index) => {
        newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
      })
      
     let sortedArray = newArray.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
     this.setState({ data: sortedArray });
     this.fetchChart();
    });
  }
  fetchChart = () => {
    const { data } = this.state;
    return <CustomLineChart data={data} />
  }

  render(){
    const {items} = this.state;
    var data = [];
    const itemList = items.map(item => {
        return <tr key={item.dateTime+''+item.value}>
            <td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
            <td>{item.measure}</td>
            <td>{item.value}</td>
        </tr>
    });
    return (
      <div>   
              {this.fetchChart()}
              <CustomDropdownList changeLink={this.onDropdownChange.bind(this)} />
              
      </div>
  );


  }
}

export default Dashboard;

Can anybody assist me to resolve this issue?

newArray = []; Just assign a new empty array.

Jared Smith
– Jared Smith

2022-06-02 15:54:24 +00:00
Commented Jun 2, 2022 at 15:54 — Jared Smith
– Jared Smith, Commented Jun 2, 2022 at 15:54

Murat Karagöz · Accepted Answer · 2022-06-02 15:50:44Z

1

You are copying the previous data with

newArray = this.state.data.slice();

You do not need that.. In fact you do not need any of this if you want to create a new array with new options.

answered Jun 2, 2022 at 15:50

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

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

Comments

Kevin Aung · Accepted Answer · 2022-06-02 16:01:11Z

You're adding the results to newArray which starts out empty that you tried to clear, then it's set to the existing data with additional data added. Also, avoid using var.

var newArray = [];

    // This is already empty
    newArray.forEach((e1,idx, arr) => {
      
        newArray.splice(idx,1);
      
    });

    // This will always be empty
    console.log(newArray);

    const url = 'https://abcdefgh...../' + e + '/readings?today';

    // Existing data, remove this
    newArray = this.state.data.slice();
    axios.get(url).then(res => {
      var response_arr = res.data.items;
      res.data.items.forEach((item, index) => {

        // This is where new data is being added to existing
        newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
      })

Collectives™ on Stack Overflow

Remove all the elements of the array in React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related