Nice job completing this project! I'm going to preface my comment by saying I'm not an expert on CRUD apps, I fell down a Jamstack rabbit hole last year and have developed a mild obsession, but I am learning new things with each one I complete. Another sidenote, I formatted my comments in the style of facebook, where there's only the parent comment and all the replies below it (at least that's how I think facebook does it, I haven't been on in years). I didn't go the reddit route where replies to replies get nested.
Tl;dr nesting: I ignored the formatting of the .json file and just used the data.
Your comment about the data being an object and nesting becoming an issue is valid. It depends on how you set things up, how data gets altered and saved. I used context and actually hooked my project up to a Fauna database (I know the db is overkill, don't worry hahah) and made a collection of comments. A collection is similar to a table in other databases, if you have server side experience. Each comment or reply was an individual document, which is how any record or item is stored with Fauna, as a document.
The way I formatted the documents, the comments, can be applied to a front-end only project. All comments had a parent_id key, if it was the original comment it had a value of an empty string, if it was a reply it was given the id of the parent comment for the value. Then I just used the parent_id property to sort out comments versus replies. I disregarded the format of the data.json file provided and just pulled the data out. You certainly could stick with their formatting, but I try not to nest too deep to make my life easier.
Regarding best practices for data handling: again I'm not an expert, but what I do is make a separate folder to throw all the data handling code in, and call functions when needed. I'll then use a useEffect hook to get the data from the server or the .json file to set things up in my App.js file. For example, this is the function I used for the buttons to change the score:
const ModScore = (direction) => {
const update = AdjustScore(comments, id, direction);
modComment(id, update);
};
The plus and minus buttons onClick event handler points to ModScore, here's a link to the AdjustScore code. AdjustScore does the heavy lifting, but in its own separate file. If you're doing a state based project, you can do the same thing, just call the functions from App.js and save the return to state.
I can definitely go into more detail if you'd like if you have more questions or I wasn't clear enough. :)
Cheers!
