CODEWITHSUNDEEP
reactjs
Jurudocs
Jurudocs

Reputation: 9165

React Design Pattern with multiple Components

I'm trying to get into react for some days now but I have problems to get the design of my application clear.

What I want is to create a "complex" form which communicates with an API. Behind the API there is a classic SQL DB. So say I have a Videoplayer which has a m2m to a Playlist-Table.

In React I have now a component with all the fields of the player. The list field in the player table shows the possible selection of playlists (i get this data via API). So far so good.

Now I wanted to create a new component with a from for the Playlist stuff if someone wants to create also a new Playlist when creating a player (there is a button to click for adding a new playlist).

Now my questions:

  1. Because the Playlist form needs to do a POST API call and should return the newly created id to the player form component... Should the Playlist component have its own state?

  2. Is it recommended that the two components have their own state? (there are some more m2m fields in the player form and with just one state the state gets quickly hard to keep structured (also because react discourages it to have a nested state structure.

  3. Is it recommended to unmount the player form component when adding the new playlist or make the player form just invisible?

Upvotes: 1

Views: 529

Answers (1)

Robbie Milejczak
Robbie Milejczak

Reputation: 5770

I would take a look at this

What follows is my opinion. There are a lot of different approaches to these types of things, but this is what has worked best for me.

Instead of giving your child component it's own state, make all your view components stateless and wrap them in a large container component. Then

1) You playlist form can recieve the post API function as a callback. In your stateful container, define it as something like

apiPost(){
    apiFunctionCall()
    .then(result){
        this.setState({ data: result })     
    }
}

Then you can pass that data wherever you need to, because all your components are children of the component containing that data in state so they are all elegible to receive it as props. You can repeat this pattern with any of your components, so it's very helpful if you need to share data between components, especially the results of api call. Also don't forget to bind any functions that set state!

2) I'm a bit unclear as to what you mean here. Are these components siblings or descendants? If they are identical siblings (i.e. multiple instances of the same thing) then if you need to, move them to a separate file and define them as their own stateful react components. I generally find that with the pattern described above this is rarely necessary, and your state can be managed in one place. If you clarify on this or post some code I might be able to help more.

3) I would unmount it and I would do it with some nifty inline logic. Have a variable in state maybe displayComponent: true. When you want the component to be hidden, set that to false and set it to true when you want it to be seen. Then in your render statement it's as easy as:

{this.state.displayComponent &&
<Component />}

Now everytime React renders the dom, your component will only display if that variable is set to true.

Hope this helped! I highly encourage you to read the article I linked above and explore this design pattern a bit more. It has helped me immensely in my React development.

Upvotes: 1

Related Questions