title: How to update the display properly in React?
body: <p>I have been learning to react, earlier i have been just calling api in componentDidMount with axios it was working fine.<br>
  Now,this task was without getting data from api, therefore i as usual called setState in  componentDidMOunt but since setState is async, it wasn't updated, when i need it.<br>
  I want to know how should i write this, in order to mitigate this issue. Here is a simple class code.</p>
  
  <pre><code>    import React from 'react'
  import CarCapacity from '../Components/TextBox/CarCapacity'
  import randomHelper from '../Helper/randomCars'
  import Row from 'react-bootstrap/Row'
  
  class Parking extends React.Component{
      state={
          inText:null,
          cars:100,
          carDetails:[],
          remainingSlots:[]
      }
  
      numberOfcars=(event)=&gt;{
          this.setState({inText:event.target.value})
      }
  
      updateFunc = ()=&gt;{
          var details = randomHelper(this.state.cars)
  
          //setState is async therefore using a callBack to check if the state has been updated
  
          this.setState({carDetails:{...details}},function(){
              console.log(this.state.carDetails)
          })
  
      }
  
  
  
  componentDidMount(){
      this.updateFunc()
  }
  
  componentDidUpdate(prevProps, prevState){
      if(prevState.cars!==this.state.cars){
          this.updateFunc()
      }
  }
  
      setToCars=()=&gt;{
          var st= this.state.inText;
  
          if(this.state.inText==null||st.trim()===""){
              alert("Cars cant be null")
          }
          else if(Number.isNaN(Number(this.state.inText))){
              alert("Enter a number")
          }
          else{
          this.setState({cars:this.state.inText})
          }
      }
  
  
      render(){
  
          console.log(this.state.carDetails)
  
          var carParkingFormation = this.state.carDetails.map((data, index)=&gt;{
              var isCarParked = data.carNumber!==null? data.carNumber: "Not parked"
              var color = data.carColor!==null? data.carColor:" "
              var pos = data.carPosition
  
              return(
                  &lt;&gt;
                      &lt;Col md={4}&gt;
                          &lt;span&gt;{isCarParked}&lt;/span&gt;
                          &lt;span&gt;{color}&lt;/span&gt;
                          &lt;span&gt;{pos}&lt;/span&gt;
                      &lt;/Col&gt;
                  &lt;/&gt;
              )
          })
  
  
          return(
              &lt;&gt;
              &lt;CarCapacity carCapacity={this.numberOfcars} genCars={this.setToCars}/&gt;
              &lt;p&gt;{this.state.cars}&lt;/p&gt;
               &lt;Row&gt;
                  {carParkingFormation}
               &lt;/Row&gt;
              &lt;/&gt;
          )
      }
  }
  
  export default Parking
  </code></pre>
  
  <p>Here, in this carParkingFormation this.state.carDetail is null as setState beig async, so, how can i ensure that it runs properly as the way expected </p>