this post was submitted on 01 Feb 2026
2 points (100.0% liked)

React

1300 readers
12 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

!pico8@programming.dev

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS
 

I'm learning React and working on my first course project, a CV generator app. I created an initial state - snippet below - which I normalized to an extent. The professional experience field has an Employer + the employer related data (employment dates, position etc.).

I'm encountering two problems with the current structure:

  • the Achievements section of each employer, which has a few subpoints, is in the same place as the company data. I can programatically select only the needed fields to display, but I was wandering if there is a better structure that I'm missing
  • when I add a second, third... employer, all their company data goes in the same place. Again, I can retrieve only what I need based on id, but I was wondering if there is a semantically better choice
const initialPerson = {
  employers: {
    byIds: {
      "employer-1": {
        id: "employer-1",
        name: "Company",
        value: "Test Org 1",
        cdataIds: ["cdata-1", "cdata-2", "cdata-3", "cdata-4", "cdata-5", "cdata-6"],
      },
      // other employers follow 
    },
    allIds: ["employer-1"],
  },
  companyData: {
    byIds: {
      "cdata-1": {
        id: "experience-1",
        name: "Position",
        value: "Test Engineer 1",
      },
      "cdata-2": {
        id: "exp-2",
        name: "Duration",
        value: "Jan. 2025 - Present",
      },
      "cdata-3": {
        id: "exp-3",
        name: "Location",
        value: "Brussels, Belgium",
      },
      "cdata-4": {
        id: "exp-4",
        name: "Achievement",
        value: "STAR: Situation Task Action Result"
      },
      "cdata-5": {
        id: "exp-5",
        name: "Achievement",
        value: "XYZ: Accomplished X as measured by Y by doing Z",
      },
      "cdata-6": {
        id: "exp-6",
        name: "Achievement",
        value: "CAR: Challenge Action Result",
      },
    },
    // data from all employers goes here
    allIds: ["cdata-1", "cdata-2", "cdata-3", "cdata-4", "excdatap-5", "cdata-6"],
  },
}
you are viewing a single comment's thread
view the rest of the comments
[–] ihze@lemmy.org 1 points 1 month ago

not in a database. The idea to normalize the state came from reading the React documentation, which mentions it as an alternative to deeply nested state. The next step is to print it as PDF. I've figured things out since posting this question, thanks so much for the help!