CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-state
paytoncodes
paytoncodes

Reputation: 92

useState reverts back to initial state after being set?

This component is an empty item slot that renders a lightbox when clicked -- the lightbox allows editing of an item, and then, when closed, should fill the slot with the newly created item.

When the information in the lightbox is changed, it sets newOption to the value of that change. When I log newOption in the global context, I get the item object, like I'm supposed to. However, when I log newOption within the stopEditOption function, it has reverted back to its original state of null. I'm not sure why it isn't keeping the value that is set with setNewOption -- is it because of the lightbox context?

export default function PollOptionSlot(props) {
    const {children, onAddOption} = props;
    const lightbox = useContext(LightboxContext);
    const [newOption, setNewOption] = useState(null);

    console.log(newOption);  // this works and logs the newOption as the newly created item, before closing the lightbox

    function stopEditItem() {
        onAddOption(newOption); // this logs as null
        lightbox.setContent(null);
    }

    function openEditor() {
        lightbox.setContent(<div className={Style.itemEditor}><ItemEditor onChange={setNewOption}
                                                                          onSaveButtonClick={stopEditItem}/></div>);
    }

    return <>
        <div className={Style.main} onClick={openEditor}>
            {children}
        </div>
    </>;
}

Upvotes: 0

Views: 396

Answers (1)

paytoncodes
paytoncodes

Reputation: 92

Nevermind, I got it to work by moving the inside of the lightbox.setContent( as well as the state management to an external function!

Upvotes: 1

Related Questions