array manipulation in reactJs

Question

I have defined an array as below

 constructor() {
    super();
    this.state = {
       resultingName : []
    };
}

After this, I perform all the operation, get the response and then push to a temporary array

let tmpArray = [];
for (var i = 0; i < response.data.names.length; i++) {
          tmpArray.push(response.data.names[i]);
        }

Now, the data is present in the tmpArray.

What is the way that I can assign this to my initial resultingName array?

These are the ways that don't work

this.setState({
    resultingName: this.state.resultingName.concat(tmpArray)        
 });

Also,

this.setState({ resultingName: [...this.state.resultingName, ...tmpArray] })

doesn't work.

What is the best way to assign to the array, since I need the data in other functions of the component.

Also, I want to display the contents of the resultingName array on the console. How do I do that?

at the time when you have the response, instead of looping you can directly use setState no need of extra calculations this.setState({ resultingName: [...this.state.resultingName, ...response.data.names] }) — Harish
– Harish, Commented Sep 17, 2019 at 4:25
you can the same data in another function with state resultingName — Harish
– Harish, Commented Sep 17, 2019 at 4:26
@Harish - this doesn't work and gives the error Cannot read property 'setState' of undefined Also, the array will be null — evan
– evan, Commented Sep 17, 2019 at 4:31
here your this is not pointing to class. check this and it will run as aspected — Harish
– Harish, Commented Sep 17, 2019 at 4:53

Dostonbek Oripjonov · Accepted Answer · 2019-09-17 04:37:33Z

0

    constructor() {
        super();
        this.state = {
           resultingName : []
        };
    }

    let tmpArray = [];
    for (var i = 0; i < response.data.names.length; i++) {
          tmpArray.push(response.data.names[i]);
      }
    this.setState({resultingName : tmpArray})

edited Sep 17, 2019 at 4:37

answered Sep 17, 2019 at 4:33

Dostonbek Oripjonov

1,6941 gold badge21 silver badges30 bronze badges

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

3 Comments

evan Over a year ago

This is the solution I have right now. I need to assign tmpArray into resultingName and use that. Thats the solution I'm looking for

Dostonbek Oripjonov Over a year ago

Sorry My laptop shut down

evan Over a year ago

this causes an issue Cannot read property 'setState' of undefined at the setState. I believe it is because the setState is inside the .then part of the axios request

Ahmed Wasim · Accepted Answer · 2019-09-17 04:35:56Z

0

Simply push element in resultingName copy.

let tmpArray = [...this.state.resultingName];
for (var i = 0; i < response.data.names.length; i++) {
     tmpArray.push(response.data.names[i]);
}

this.setState({ resultingName: tmpArray })

answered Sep 17, 2019 at 4:35

Ahmed Wasim

1951 silver badge5 bronze badges

Comments

Erkan Erkişi · Accepted Answer · 2019-09-17 04:39:22Z

0

If you want to render every loop in array, use setstate instead of tmparray. But for one render issue setState{(yourarray : tmparray)}

Check it out here

How to update array state in react native?

edited Sep 17, 2019 at 4:39

answered Sep 17, 2019 at 4:28

Erkan Erkişi

1591 gold badge5 silver badges14 bronze badges

Comments

Sukesh Hublikar · Accepted Answer · 2019-09-17 05:01:11Z

0

Try to use arrow function on onclick function

import React from "react"; import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {   constructor() {
    super();
    this.state = {
      resultingName: []
    };   }

  handleClick = () => {
    const names = ["joe1", "joe2", "joe3", "joe4", "joe5"];
    let tmpArray = [];
    for (var i = 0; i < names.length; i++) {
      tmpArray.push(names[i]);
    }
    // this.setState({
    //   resultingName: this.state.resultingName.concat(tmpArray)
    // })
    this.setState({
      resultingName: [...this.state.resultingName, ...tmpArray]
    });   };   render() {
    return (
      <div className="App">
       <button onClick={()=>this.handleClick()}>Click me</button>
        <div>{this.state.resultingName}</div>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );   } }

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

answered Sep 17, 2019 at 5:01

Sukesh Hublikar

12410 bronze badges

1 Comment

Sukesh Hublikar Over a year ago

By using arrow function component this will be preserved in called function.

Ramesh Sankar · Accepted Answer · 2019-09-17 10:51:21Z

class TodoApp extends React.Component {
  constructor(props) {
    super();
    this.state = {
       resultingName : []
    };`enter code here`
  }
  componentDidMount(){
    let tmpArray = [];
  for (var i = 0; i <10; i++) {
          tmpArray.push(`arraypushtest-${i}`);
        }
  this.setState({
    resultingName: this.state.resultingName.concat(tmpArray)        
   }); 
   // another format 
 this.setState({ resultingName: [...this.state.resultingName, ...tmpArray] })
 //another format 
 let tmpArray1 = this.state.resultingName;
  for (var i = 0; i <10; i++) {
          tmpArray1.push(`arraypushtest-${i}`);
        }
        this.setState({resultingName:tmpArray1}) 
  }

  render() {
  console.log('this',this.state)
    return(
<h1>ArrayPUshElement</h1>)
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

The format you told is working fine using the lifecycle function by componentDidMount() method or callback function. Hope this will work fine:)

Collectives™ on Stack Overflow

array manipulation in reactJs

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related