How can I set a date with Chrome’s React Developer Tools extension?

  javascript, react-devtools, reactjs

I would like to do some deep debugging on my Provider component using React Developer tools’ (version 4.13.2) Components tab.

The Provider in question would look something like the following:

export const MyContext = createContext({});

export const MyContextProvider = ({ children }) => {
    const [selectedDate, setSelectedDate] = useState(new Date())
    const [selectedTime, setSelectedTime] = useState(null)

    const value = {
        selectedDate, setSelectedDate,
        selectedTime, setSelectedTime
    }
    return (
        <MyContext.Provider value={value}>
            {children}
        </MyContext.Provider>
    )

}

I am putting in different state values for strings and numbers and watching that being reflected on the UI as expected. An issue however I am running into is that one of those values is a Date.

When I first access the tool, it looks like the following image:
React Dev Tools Date value image

If I try to edit it, it will not allow me to do so, unlike it’s selectedTime counterpart, which is a string and I can put whichever value I’d like in it and see the UI update accordingly.

I’ve tried to instead override the date field, but cannot get a valid Date to be used in it’s place. The value errors and looks as follows:

enter image description here

So my question is, is it possible to put in a Date value through this section of the extension? How could I do so?

PS: apologies for using screenshots, because this is from the extension, the copying and pasting of the fields wouldn’t make sense.

Source: Ask Javascript Questions

LEAVE A COMMENT