React is not re rendering after setState is called, why?

Question


export default class Data extends Component {
  constructor(props)
  {
    super(props);
    this.state = {
      pages : [],
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(event){

    
   var newpages = this.state.pages;
   
    newpages.push(event);
    this.setState = ({
      pages: newpages,
    });
    console.log(this.state.pages)
    if(this.state.pages!=undefined)
    {this.state.pages.forEach(element => 
                            ((element!=undefined) ?console.log("jsjha"):console.log("hsdgahdhasgh") ))}
//working  
    
  }

  

  render() {
    console.log(this.state.pages); // not working, nothing is printed in the console
    return (
      <>
    
    <button onClick={()=>this.handleClick("Tab 1")} value="Tab 1" id="1">Tab 1</button>
    <button onClick={()=>this.handleClick("Tab 2")} value="Tab 2" id="2">Tab 2</button>
    <button onClick={()=>this.handleClick("Tab 3")} value="Tab 3" id="3">Tab 3</button>
    <h3>Hello this is Data bar!</h3>
    <hr/>
    
    { 
      (this.state.pages.map(function(element,i)
        {return <p key={i}>{element}hdkashdak</p> }))
    }
// not working
                            
                   
    
    
    </>
    );
  }
}

In the console.log , I can see "jsjha" being printed, means the state is bein updated. But in the render function I cannot see the set being updated.

I have even bind the handleClick function.

Also, is everything correct witht the JSX map function? I am using the return statement and still it isn't working.

`this.setState = ({ pages: newpages, });` - that's *assignment*, you're not calling the method. — jonrsharpe, Oct 12 '20 at 10:34
The answer is in your own wording... *"after setState is **called**"*. Nowhere in the code are you **calling** the `setState` function. — David, Oct 12 '20 at 10:35
you have to change the value to rerender it, in your method you are setting the state value in the state again. — Prashant tiwari, Oct 12 '20 at 10:44

Md Sabbir Alam · Accepted Answer · 2020-10-12T11:41:18.440

0

First of all the usage of this.setState is wrong. setState is a function you should call it not assign something to it. Besides this issue, there is another issue with array reference. Because you are using the previous array reference in the state, that is why react doesn't know if the array is changed or not. Thus not re-rendering. You have to make sure that the array reference for pages is changed by doing this,

this.setState({
  pages: [...newpages],
});

You can look into this thread for more understanding

edited Oct 12 '20 at 11:41

answered Oct 12 '20 at 10:40

Md Sabbir Alam

4,937
3
15
30

No need to Destructuring the newpages array. – Jahid Hasan Oct 12 '20 at 10:44
1

The bigger issue is that `setState` is a function to be called, not a variable to be assigned, which you quietly corrected without mentioning. – David Oct 12 '20 at 10:56
My bad, @David, Thanks for mentioning. Updating my answer. Thanks a lot! – Md Sabbir Alam Oct 12 '20 at 11:40

score -1 · Answer 2 · answered Oct 12 '20 at 10:39

try this:

export default class Data extends Component {
  constructor(props)
  {
    super(props);
    this.state = {
      pages : [],
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(event){
    this.setState({
      pages: [...this.state.pages, event],
    });
  }

  

  render() {
    console.log(this.state.pages); // not working, nothing is printed in the console
    return (
      <>
    
    <button onClick={()=>this.handleClick("Tab 1")} value="Tab 1" id="1">Tab 1</button>
    <button onClick={()=>this.handleClick("Tab 2")} value="Tab 2" id="2">Tab 2</button>
    <button onClick={()=>this.handleClick("Tab 3")} value="Tab 3" id="3">Tab 3</button>
    <h3>Hello this is Data bar!</h3>
    <hr/>
    
    { 
      (this.state.pages.map(function(element,i)
        {return <p key={i}>{element}hdkashdak</p> }))
    }
// not working
                            
                   
    
    
    </>
    );
  }
}

React is not re rendering after setState is called, why?

2 Answers2