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:
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:
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.