React functions not using current state

Question

I'm wondering if someone could explain to me the below behavior?

handleModalOpen runs fine and I get two Textfields as expected (although I can't change their values...?) I hit the ADD button, and one Textfield is added to the modal, but not to Tabs.. Every time I hit Add thereafter, a Textfield is added to the modal, the logged output remains the same

Initial Tabs state:
  0: {ID: 'ImyftecmJE', Label: 'MONDAY'}
  1: {ID: 'z8JQAOnj7Q', Label: 'TUESDAY'}

.

console output:
handleModalOpen (2) [{…}, {…}]
App.js:185 handleModalAddTab1 (2) [{…}, {…}]
App.js:187 handleModalAddTab2 (2) [{…}, {…}]   // Expecting 3
App.js:172 useEffect [Tabs] (3) [{…}, {…}, {…}] // ok, as expected
App.js:177 SetNewTabValue (2) [{…}, {…}] // only 2, why?

Code:

useEffect(() => {
    console.log('useEffect [Tabs]', Tabs);  // 3. Shows 3 items
    }, [Tabs]); 
    
function SetNewTabValue(value,ID) {
    var result = Tabs.filter(Tab => Tab.ID === ID);
    console.log("SetNewTabValue",Tabs);   // 4. After changing the contents of the new Textfield, onBlur fires and we end up here, with only two array items... why?  
    /*result[0].Label = value;*/
} 
function handleModalAddTab(array) {
    var newId = createId(10);
    array.push(<TextField variant="filled" key={newId+'-TextField'} id={newId} style={{display: 'block', marginBottom: '5px'}} onBlur={(event) => {SetNewTabValue(event.target.value,newId)}} fullWidth/>);
    setModalContent(array);

    console.log("handleModalAddTab1",Tabs); // 1. Shows 2 array items as expected
    setTabs(Tabs.concat({"ID":newId,"Label":""}));
    console.log("handleModalAddTab2",Tabs); // Still shows 2 items...

}
function handleModalOpen(editWhat){ 
    switch (editWhat) {
        case "Tabs":
            var tempArray = [];
            var tempArray2 = [];
            setModalHeaderText("EDIT AGENDA MENU");
            
                console.log("handleModalOpen",Tabs);
                Tabs.forEach(Tab => (
                    tempArray2.push(<TextField variant="filled" key={Tab.ID+'-TextField'} value={Tab.Label} style={{display: 'block', marginBottom: '5px'}} onBlur={(event) => {SetNewTabValue(event.target.value,Tab.ID)}} fullWidth/>)
                ))
                tempArray.push(tempArray2)        
            
            setModalContent(tempArray2);
            setModalFooter((
                <>
                <Button
                    onClick={() => handleModalAddTab(tempArray2)}
                    style={{ backgroundColor: ModalButtonBG }}>
                    ADD TAB
                </Button>
                <Button
                    onClick={handleModalClose}
                    style={{ backgroundColor: ModalButtonBG }}>
                    CANCEL
                </Button>
                <Button
                    onClick={handleModalClose}
                    style={{ backgroundColor: ModalButtonBG }}>
                    SAVE
                </Button>
                </>
                ));
            break;
    }
    setModalShow(true);
}

React functions not using current state

0 Answers0