0

I have a property of type object array in a React component. Using setState I am trying to modify this property. But assigning a new value to this property inside setState has no effect. Please find below my sample code.

export const Test = ({
  objectArray,
  changeState = function (newoOjectArray) {
    this.setState({objectArray: newoOjectArray});
    console.log(JSON.stringify(objectArray)); // Doesn't reflect changes. Prints old objectArray
  }
 }) => 
(
    <div>Some data</div>
)

Some user action will trigger a call to changeState(newoOjectArray). I am calling setState inside changeState function.
After calling setState if I print the objectArray variable to console it still holds old value. How can I make setState assign a new value to objectArray.
Thanks

EDIT

I am aware that setState is asynchronus and update to property may reflect after a delay. But in case of example code above objectArray variable is never updated even after delay.
I have implemented componentWillReceiveProps(nextProps) method and it gets called but it always receives old objectArray. So I don't think the issue is related to setState being asynchronous.

EDIT2

I have created an example app to demonstrate the issue I am facing. The example app runs fine locally and I can reproduce the issue. But I am not being able to get the same example app code working in codepen. it's giving me some 'unexpected token' errors. But I hope looking at the code will help understand my issue better. The code is based on existing application structure.

Codepen example here.

In the code I have a Parent and two children Child1 and Child2. In Parent I have a function changeState defined which I am passing to Child1 as property. And to Child2 I am passing a 'name' property from Parent.
Clicking on 'Change Name' button in Child1 triggers a call to changeState function of Parent. Initial value of name in Parent is 'Robert'. changeState is invoked from Child1 with new name value of 'Tom'. But in changeState function assigning new value to 'name' using setState has no effect. I am calling a function to print the 'name' after setState has completed but it prints old name value and NOT the new one assigned in setState.

ivish
  • 572
  • 11
  • 35
  • 1
    `setState()` may be asynchronous. Try doing this : `this.setState({objectArray: newoOjectArray}, () => console.log(this.state.objectArray);` – Weedoze Mar 12 '18 at 09:16
  • @Weedoze I tried adding console.log the way you suggested. But it never gets called. And nothing is logged. But console.log after setState is called which prints the old value. – ivish Mar 12 '18 at 09:32
  • Then pleas provide a minimal, working example – Weedoze Mar 12 '18 at 09:35
  • @Weedoze Added codepen example. Also edited the question to explain the codepen code. – ivish Mar 12 '18 at 12:58
  • I'm not quite aware of the syntactic sugar being used here, but shouldn't the state be in the state property for setState to modify it? at least that's how it always work for me. you access the state with `this.state.prop`, set it in a class with `state = {prop: "string"}` and then use `setState({prop: "modified-string"})` to change it. – Félix Adriyel Gagnon-Grenier Mar 12 '18 at 20:01

0 Answers0