I am facing a problem of a state that is not being updated when I call the local storage get item in `componentdidmount()` function of the class component.

Here the state `myAddress` is assigned to get the JSON data stored in localStorage and then setting itself as `setState` but instead of this it is showing `undefined` in console log. We can add the data for the first time only when we refresh the page it throws the `[Object, Object]` error.

```
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAdd, faBackward, faDeleteLeft, faHandDots, faKeyboard, faLocation, faLocationArrow, faLocationDot, faPlusCircle, faRecycle, faRemove, faRemoveFormat, faTrash, faTrashCan, faUserEdit } from '@fortawesome/free-solid-svg-icons';
import React, { Component } from 'react';
// import { Link, useNavigate, useParams } from 'react-router-dom';
import swal from 'sweetalert';

export default class Address extends Component {
 constructor(props){
     super(props);

 this.state = {
    addNewAdd: false,
    myAddress:[],
    editAddress: false,
    fullName: '', 
    mobileNumber: '',
    pinCode: '',
    houseNo: '',
    areaVill: '',
    landMark: '',
    townCity: '',
    state: '',
    default: false,
    addressType: '',
    uniqueID: ''
    };        
}

AddNewAddress = () => this.setState({addNewAdd:true});

saveAddress = () => {
    if(this.state.fullName === "" || this.state.mobileNumber === "" || this.state.pinCode === "" || this.state.houseNo === "" || this.state.areaVill === "" || this.state.landMark === "" || this.state.townCity === "" || this.state.state === "" || this.state.addressType === ""){
           swal("Empty Values", "All Fields are empty, Fill to proceed","error");
    }
    else{
        const newData = [{
            fullName : this.state.fullName,
            mobileNumber: this.state.mobileNumber,
            pinCode: this.state.pinCode,
            houseNo: this.state.houseNo,
            areaVill: this.state.areaVill,
            landMark: this.state.landMark,
            townCity: this.state.townCity,
            state: this.state.state,
            default: this.state.default,
            addressType: this.state.addressType
        }]
        if(this.state.editAddress === false){
            let jsonData;
            jsonData = JSON.stringify(newData);
            this.setState({myAddress : [...this.state.myAddress, jsonData]});
            swal("Address Saved", "Your Address has been saved !", "success");
            this.setState = {
                fullName: '', 
                mobileNumber: '',
                pinCode: '',
                houseNo: '',
                areaVill: '',
                landMark: '',
                townCity: '',
                state: '',
                default: false,
                addressType: '',
                addNewAdd: false
                };
        }
        else{
            const newArrayData = this.state.myAddress.filter((data) =>  data.uniqueId !== this.state.uniqueID);
            alert(JSON.stringify(newArrayData));
            newArrayData = JSON.stringify(newArrayData);
            swal("Address Saved", "Your Edit in Address has been saved !", "success");
            this.setState({addNewAdd: false});
        }
  }
}

exitAddressForm = () =>{
    this.setState({addNewAdd: false});
    this.setState({
        fullName: '', 
        mobileNumber: '',
        pinCode: '',
        houseNo: '',
        areaVill: '',
        landMark: '',
        townCity: '',
        state: '',
        default: false,
        addressType: '',
        editAddress:false
        });
}

editSavedAddress = (uniqueId) =>{
    this.setState({addNewAdd: true})
    let addressData, newJsonData;
    const addressEs = localStorage.getItem("myAddress");
    if(addressEs){
        addressData = JSON.parse(addressEs);
        newJsonData = addressData.filter((data) =>  data.uniqueId === uniqueId);
        newJsonData.map((data, index) =>{
             this.setState({
                editAddress:true,
                fullName: data.fullName, 
                mobileNumber: data.mobileNumber,
                pinCode: data.pinCode,
                houseNo: data.houseNo,
                areaVill: data.areaVill,
                landMark: data.landMark,
                townCity: data.townCity,
                state: data.state,
                default: data.default,
                addressType: data.addressType,
                uniqueID: data.uniqueId
        });
    });
  }
} 

componentDidMount(){
    const addressEs = JSON.parse(localStorage.getItem("myAddress")) || [];
    console.log("Length :  " + Object.keys(addressEs).length);
    if(Object.keys(addressEs).length > 0){
        this.setState({myAddress: addressEs});
    }
}

componentDidUpdate(){
        console.log("state " + this.state.myAddress); 
        localStorage.setItem("myAddress", this.state.myAddress);
}

render() {      
    return (
        <>
        <div className='container mx-auto w-[60%]'>
        <div className='w-full lg:flex md:flex mt-5'>
            <div className='drop-shadow-lg lg:w-[80%] md:w-[80%] m-4 sm:w-full'>
                <div className='bg-white p-3 rounded-t-md text-lg'>Address</div>
                { Object.keys(this.state.myAddress).length > 0 & ! this.state.addNewAdd ? 
                this.state.myAddress.map((data, index) => (
                    <><div key={index} className="mt-2 text-left bg-white rounded-lg font-sans flex flex-wrap">
                        <div className='bg-green-200 w-[25%] text-center p-2 text-blue-600 hover:text-green-700 hover:transition hover:delay-100'>
                            <FontAwesomeIcon icon={faLocationDot} size='8x' />
                        </div>
                        <div className='p-4 w-[60%]'>
                        <b>{data.fullName}</b><br/>
                        {data.houseNo}<br/>
                        {data.areaVill},&nbsp; 
                        {data.landMark},&nbsp;
                        {data.townCity}<br/>
                        <b>Pin Code</b> {data.pinCode}&nbsp;, {data.state}<br/>
                        <b>India</b> , Phone Number : {data.mobileNumber} 
                        </div>
                        <div className='bg-white w-[15%] p-2 grid grid-rows-3 text-center mx-auto border-l-2 border-dotted'>
                            <div className='h-[33%]'>
                                <button onClick={() => this.editSavedAddress(data.uniqueId)} className='p-1 text-gray-300 hover:text-gray-800'><FontAwesomeIcon icon={faUserEdit} size='2x'/></button>
                            </div>
                            <div className='h-[33%]'>
                                <button className='mt-2 -ml-2 text-gray-300 hover:text-gray-800'><FontAwesomeIcon icon={faTrash} size='2x'/></button>
                            </div>   
                            { data.default ? <><div className='h-[33%] p-1 mt-1 -ml-2'>
                                <button className='text-gray-300 hover:text-gray-800'><FontAwesomeIcon icon={faDeleteLeft} size='2x'/></button>
                            </div></> :                         
                            <div className='h-[33%] p-1 mt-1 -ml-2'>
                                <button className='text-gray-300 hover:text-gray-800'><FontAwesomeIcon icon={faKeyboard} size='2x'/></button>
                            </div>
                            }
                        </div>
                    </div></>
                ))
                :null
                } 

                {this.state.addNewAdd ? <>
                        <div className='bg-gray-100 p-4 w-full text-left'>
                            Full Name <br/>
                        <input type="text" value={this.state.fullName} onChange={(e) => this.setState({fullName: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full'/><br/>
                           Mobile Number<br/>
                        <input type="number" value={this.state.mobileNumber} onChange={(e) => this.setState({mobileNumber: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full'/><br/>
                         Pin Code<br/>
                        <input type="number" value={this.state.pinCode} onChange={(e) => this.setState({pinCode: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full'/><br/>
                        Flat, House no., Building, Company, Apartment<br/>
                        <input type="text" value={this.state.houseNo} onChange={(e) => this.setState({houseNo: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full'/><br/>
                        Area, Street, Sector, Village<br/>
                        <input type="text" value={this.state.areaVill} onChange={(e) => this.setState({areaVill: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full'/><br/>
                        Landmark<br/>
                        <input type="text" value={this.state.landMark} onChange={(e) => this.setState({landMark: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-full' placeholder='Eg Near Sec 15 Main Market'/><br/>   
                        <div className='flex'>
                        <div className='w-[50%]'>Town/City
                        <input type="text" value={this.state.townCity} onChange={(e) => this.setState({townCity: e.target.value})} className='mr-2 mt-2 mb-2 p-1 border-[1px] border-gray-500 rounded-md w-[80%]' placeholder=''/>
                        </div>
                        <div className='w-[50%]'>State<br/>
                          <select name="state" id="state" value={this.state.state} className="p-1 bg-gray-200 rounded-lg mt-1 h-10 w-[100%]"  onChange={(e) => this.setState({state: e.target.value})}>
                               <option value="0">Choose</option>
                                <option value="Andhra Pradesh">Andhra Pradesh</option>
                                <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                <option value="Assam">Assam</option>
                                <option value="Bihar">Bihar</option>
                                <option value="Chandigarh">Chandigarh</option>
                                <option value="Chhattisgarh">Chhattisgarh</option>
                                <option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
                                <option value="Daman and Diu">Daman and Diu</option>
                                <option value="Delhi">Delhi</option>
                                <option value="Lakshadweep">Lakshadweep</option>
                                <option value="Puducherry">Puducherry</option>
                                <option value="Goa">Goa</option>
                                <option value="Gujarat">Gujarat</option>
                                <option value="Haryana">Haryana</option>
                                <option value="Himachal Pradesh">Himachal Pradesh</option>
                                <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                <option value="Jharkhand">Jharkhand</option>
                                <option value="Karnataka">Karnataka</option>
                                <option value="Kerala">Kerala</option>
                                <option value="Madhya Pradesh">Madhya Pradesh</option>
                                <option value="Maharashtra">Maharashtra</option>
                                <option value="Manipur">Manipur</option>
                                <option value="Meghalaya">Meghalaya</option>
                                <option value="Mizoram">Mizoram</option>
                                <option value="Nagaland">Nagaland</option>
                                <option value="Odisha">Odisha</option>
                                <option value="Punjab">Punjab</option>
                                <option value="Rajasthan">Rajasthan</option>
                                <option value="Sikkim">Sikkim</option>
                                <option value="Tamil Nadu">Tamil Nadu</option>
                                <option value="Telangana">Telangana</option>
                                <option value="Tripura">Tripura</option>
                                <option value="Uttar Pradesh">Uttar Pradesh</option>
                                <option value="Uttarakhand">Uttarakhand</option>
                                <option value="West Bengal">West Bengal</option>
                            </select>
                            </div>
                        </div>
                        <br/>
                        <input type="checkbox" value={this.state.default} className='accent-pink-500 w-4 h-4' checked={this.state.default}  onChange={(e) => this.state.default ? this.setState({default: false}) : this.setState({default: true})}/> &nbsp;Make this address default <br/>
                        <br/>
                        <h2><b>Add Delivery Instructions</b></h2>
                        Preferences are used to plan your delivery. However, shipments can sometimes arrive early or later than planned.
                        <br/>
                        <b>Address Type</b>
                         <select name="state" id="state" value={this.state.addressType} className="p-1 bg-gray-200 rounded-lg mt-1 h-10 w-[100%]" onChange={(e) => this.setState({addressType: e.target.value})}>
                                <option value="0">Choose</option>
                                <option value="Home">Home</option>
                                <option value="office">Office or Commercial</option>
                         </select>
                         <div>
                             <button className='mt-4 border-2 bg-yellow-500 rounded-lg px-3 py-1 text-white hover:bg-gray-800 hover:transition hover:delay-100 active:transform' onClick={this.saveAddress}>Save</button>
                             <button className='mt-4 ml-4 border-2 bg-orange-600 rounded-lg px-3 py-1 text-white hover:bg-gray-800 hover:transition hover:delay-100 active:transform'>Save & Back</button>
                             <button className='mt-4 ml-4 border-2 bg-blue-500 rounded-lg px-3 py-1 text-white hover:bg-gray-800 hover:transition hover:delay-100  active:transform'>Clear</button>
                         </div>       
                        </div> 
                </>:null}
            </div>
            <div className='drop-shadow-lg lg:w-[20%] md:w-[20%] m-4 sm:w-full'>
                { ! this.state.addNewAdd ?
                <button onClick={this.AddNewAddress}>
                <div className='bg-orange-600 text-white p-4 rounded-lg drop-shadow-md hover:bg-white hover:text-gray-800 hover:transition hover:delay-100 w-[100%]'>
                    <div><FontAwesomeIcon icon={faPlusCircle} size='4x' /></div>
                    <div className='mt-4'>Add New Address</div>
                </div>
                </button>
                :
                <button onClick={this.exitAddressForm}>
                <div className='bg-indigo-800 text-white p-4 rounded-lg drop-shadow-md hover:bg-white hover:text-gray-800 hover:transition hover:delay-100 w-[100%]'>
                    <div><FontAwesomeIcon icon={faBackward} size='4x' /></div>
                    <div className='mt-4'>Exit Address Form</div>
                </div>
                </button>
                }
            </div>
        </div>
        </div>
      </>
    )
   }
}

```