Is this a bug in React, or am I missing something?? I have an object which has a base64 string.
const [ state, updateState ] = useState({ base64: "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CiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zNDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4zNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KRG43IAAAAAtJREFUCB1j+A8EAAn7A/0Mu1vnAAAAAElFTkSuQmCC" });
When I console out this object the string is empty…
console.log(state);
// { base64: "" }
2
Answers
Sorry, issue was caused because
useEffect
was setting the property back to an empty string from a prop that was passed into the component.Thanks for the responses. I will delete this question, as it's not an actual issue.
I tried to log out the useState hook locally in vs code and it seems to work fine, although I got the below warning when I hovered over the code snippet
You might want to consider either renaming the state itself into something unique, the name state might be a reserved keyword or save the original content of this string in a file and use that instead