JSON.parse issue with redux state - json

Question

Using React and Redux, I'm making the call getNoteById which returns some string inside of note.
I want to JSON.parse the note variable but if it's undefined then setValue to initialValue where I know it will parse properly.
The issue I'm having is when I check to see if JSON.parse(note) is undefined or not, I always get the same error of undefined index at 0.
Not sure how to fix this. When the component loads and getNotesById() is called, notes or initialValue should be displayed when i call setValue.
const TextEditor = ({ note, getNoteById, clearValues }) => {
const paramId = match.params.notes;
const [value, setValue] = useState();
useEffect(() => {
getNoteById(paramId);
if (JSON.parse(note) == undefined) {
setValue(initialValue);
} else {
setValue(JSON.parse(note));
}
return () => {
clearValues();
};
}, [paramId, value]);
return (
<div>
<h1> {value} </h1>
</div>
);
};

Answer 1

Your effect has missing dependencies: clearValues, getNoteById and note. You should skip the setValue to initialValue and do const [value, setValue] = useState(initialValue); because an effect runs after the render and note will be undefined on first render. Check if note is undefined with if(note!==undefined){setValue(JSON.parse(note))}.
Your code should look something like this:
const TextEditor = ({ note, getNoteById, clearValues }) => {
const paramId = match.params.notes;
const [value, setValue] = useState(initialValue);
useEffect(() => {
getNoteById(paramId);
if(note!==undefined) {
setValue(JSON.parse(note));
}
return () => {
clearValues();
};
}, [clearValues, getNoteById, note, paramId, value]);
return (
<div>
<h1> {value} </h1>
</div>
);
};
My guess is that you don't want to dispatch getNoteById again when the note is loaded and set in the redux state. Maybe create 2 effects:
const TextEditor = ({ note, getNoteById, clearValues }) => {
const paramId = match.params.notes;
const [value, setValue] = useState(initialValue);
//dispatch getNoteById when param id changes
useEffect(() => {
getNoteById(paramId);
return () => {
//dispatch a cleanup action
clearValues();
};
}, [clearValues, getNoteById, paramId]);
//set the note to it's parsed json when it changes
// and is not undefined
useEffect(() => {
if (note !== undefined) {
setValue(JSON.parse(note));
}
}, [note]);
return (
<div>
<h1> {value} </h1>
</div>
);
};