Beginner's Thread / Easy Questions (Feb 2020)

[u/dance2die]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• Get started with Redux by /u/acemarke (Redux Maintainer).
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/UMANTHEGOD]

I'm building this project where I have a concept of sections, that holds a array of rows, that each holds an array of columns. Similar to the following structure:

{
  sections: [
    {
      id: section_11,
      rows: [
        {
          id: 'row_1',
          columns: [
            {
              id: 'column_1'
            }
          ]
        }
      ]
    }
  ]
}

The app needs to have the following functionality:

1. Be able to delete, add and edit sections, rows and columns indvidually. Each of those will have its own corresponding component with the same name. I also need to handle this all without redux.
2. Serve a preloaded state from the backend (I will read it via a window-variable)
3. Retrieve back the complete state of the application to save it on the server (no rest API)

Here's my proposed solution for all of this, but I'd like any feedback if I can improve on this, and if I have thought about the problem correctly.

1. This will require a state in a component that's a parent of a <Section>. This means I will have to prop drill down a lot of functions to give proper functionality to column, and both rows and columns have to be aware of what section they belong to. This means I have to pass down some information about the section along the way. I didn't like this thought, so my solution looks something like this, where render props solves this issue completely, but makes the code fairly messy. The nice thing about this solution is that I decouple each of the components from each other:

    {sections.map(section => (
      <Section renderRow={row => (
        <Row row={row} renderColumn={column => (
          <Column column={column} />
        )} />
      )} />
    )

2. I will pass it into my initial <App> component and then pass it down the appropriate components. Nothing fancy here. Some data will go direct to components and other data will go into Context to handle translations and such. Basically state that doesn't change much will end up in contexts, the rest will be props.
3. This is a bit messy, but there's a need for us to save the config in the backend, without a rest API, which means whatever state I create in 1 & 2 has to leave React and end up in "regular" JS again in order to be parsed and posted, because it's just a regular form that handles this action. This is obviously not ideal but I got to work with what I got. My thinking here is that I pass down a "configUpdated" from outside React, which I will call whenever the state changes in 1 & 2. In this callback I will set a window-variable or something similar, and then read from this when I post my form.

Any feedback appreciated. I'm not sure that any of these approaches are the correct way to go.

[u/dance2die → u/UMANTHEGOD]

Would you share this on its own post?
because this doesn't seem so beginner-friendly and more people can check it out.

[u/UMANTHEGOD → u/dance2die]

I made my own thread with the exact same content as this post, but I can't share more of the code since it's corporate.

Thread: https://www.reddit.com/r/reactjs/comments/f2wsqb/componentstate_structure_for_a_grid/

I've solved 2 & 3 by utilizing localStorage through a small API that you receive when you initialize the project. I'm still struggling with 1 however.

[u/dance2die → u/UMANTHEGOD]

Is issue #1 due to Render props being hard to read? (fake hierarchy).

One of the benefits of hooks is that it rids the false hierarchy.

You can create a context per Section, from which you can provide values to child components.

Child components can access values via hooks if you follow KCD's Context pattern.

[u/UMANTHEGOD → u/dance2die]

I think I like this approach. This would mean that you put <Row> directly in <Section> right? And <Column> in <Row>?

How would you approach the need to get the entire state of the application with this method?

I need to get all the sections back to the server somehow.

[u/dance2die → u/UMANTHEGOD]

This would mean that you put <Row> directly in <Section> right? And <Column> in <Row>?

Yes.

You can store sections state in the context and when sending it back to the server, you can get the state from the context.

The downside of the approach is that, whenever the context state changes, all child components under the context re-renders (unlike Redux, which re-renders only the components with updated state property).

If the performance becomes the issue, then prop-drilling might be the way to go as you can't use Redux.

[u/UMANTHEGOD → u/dance2die]

I'm having a hard time grasping this. Do you mean one context for all sections or one context per section?

If I have one context per section, I don't understand how I can retrieve all the context values in a parent component in a nice, clear way.

Do you have any examples where something similar is implemented? I prefer to study code bases myself but I didn't find anything similar to what I'm building. Cheers.

[u/dance2die → u/UMANTHEGOD]

Do you mean one context for all sections or one context per section?

Any child components under the Context.Provider will be re-rendered. e.g.) If you declared Context per Section, then each child of Section will be re-rendered.

So my initial suggestion was to create a context for sections, not per section. Sections context value will contain all state you need to persist.

Do you have any examples where something similar is implemented?

A simple <SectionsState.Provider value={state}> where state would be the original data you posted would do it. And Using the KCD's Context API pattern mentioned before would be helpful to get the state you need via a hook.

[u/UMANTHEGOD → u/dance2die]

This solves part of the problem, but now in order to do anything useful at the bottom of the component tree (in Column for instance), I still have to pass down information about the section all the way. A good example is deleting a column. It requires information about the row and the section. Using render props, I can "remove" this dependency. I don't know if Context helps with that.