Getting array state is not iterable in react js Class Component-CodePudding

I have an array state named UpdatedStatus. I want to append an object into this array whenever a button is clicked, however I keep getting UpdatedStatus in not iterable whenever I click the button

This is how I initialized the state:

class AppointmentDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            BookedServices: [],
            Details:[],
            Reject_Modal: false,
            Lab_note: "",
            UpdatedStatus:[],

        };
        this.toggleRejectModal = this.toggleRejectModal.bind(this);
    }

This is how I defined the state inside render()

 render() {
    const{BookedServices}=this.state;
    const {UpdatedStatus} =this.state.UpdatedStatus;
    const{Details}=this.state;
    return (
      <React.Fragment>
        <div className="page-content">

This is how I am trying to set the state:

                      <Button 
                       color="primary"
                       size="sm"
                       className="btn-pill mx-2"
                       onClick={() => { this.setState({ UpdatedStatus:[...UpdatedStatus, {BookedServiceStatus: "Accepted", id: item.id }]})
                       console.log(this.state.UpdatedStatus.id)
                                    }}
                                    >
                        Accept
                        </Button>

CodePudding user response：

The issue is from destructing the UpdatedStatus from the state. Please replace the snippet with the following const {Details, BookedServices, UpdatedStatus} = this.state; And inside the console log access the first item of UpdatedStatus, using this.state.UpdatedStatus[0].id

class AppointmentDetails extends Component {
  constructor (props) {
    super(props);
    this.state = {
      BookedServices: [],
      Details: [],
      Reject_Modal: false,
      Lab_note: '',
      UpdatedStatus: []

    };
    this.toggleRejectModal = this.toggleRejectModal.bind(this);
  }

  render () {
    const { Details, UpdatedStatus, BookedServices } = this.state;
    return (
      <div className='page-content'>

        <Button
          color='primary'
          size='sm'
          className='btn-pill mx-2'
          onClick={() => {
            this.setState({ UpdatedStatus: [...UpdatedStatus, { BookedServiceStatus: 'Accepted', id: item.id }] });
          }}
        >
          Accept
        </Button>
      </div>
    );
  }
}

CodePudding user response：

While updating state using its previous value, the callback argument should be used. Otherwise, stale values of state may be taken into account.

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

this.setState((state)=>
    ({ UpdatedStatus: state.UpdatedStatus.concat({ BookedServiceStatus: 'Accepted', id: item.id })
);