Possible to use React to render to a different div

Hey all,
I’m working on the Recipe box react challenge, and I decided to add my own flare, by adding a shopping list on the left hand side of the screen.


If you look at the screenshot, you’ll see that I have an “add to shopping list button”, and I’m trying to render the ingredients and name of the food on the recipe list, into the shopping list well. I would think that the only way to do this (since my ReactDOM.render is focused on the recipe well), would be to do another ReactDOM.render but it appears as though that doesn’t work. Suggestions?

I’m still new to React as well, so take this as it is.

What you can do is separate your components. You have a Shopping list for your ingredients, and your Recipe list

Turn those into two components, and have your APP.js file render those two components. This is just an idea, you don’t have to follow this. You can easily do this all in just one file.

Then, with your “add to shopping list” button, you can add all the ingredients needed by updating the State of your Shopping list.

Read up about component state here: https://facebook.github.io/react/docs/state-and-lifecycle.html

@Torgian

That’s not actually a terrible idea, however, in your example wouldn’t you have to udpate the state of one component from another component? If so how?

React has a good example of two components reacting to the same state change. Technically each component is unaware of the other, they aren’t changing each other’s state specifically, they’re changing A state.

You can also do something more complex with Redux

Since I’ve started using React I began to think of state in terms of application and component. I think in order to understand state it is important to understand why React has become so popular.

Let’s take you app as an example. For now imagine that it is using just vanilla javascript without any framework like React. The recipes list and the shopping list each have their own object with its internal state. Also the recipes list object has an array with all the recipes and the shopping list an array of all the recipes in the shopping list. Lets put a new recipe in the shopping list. To do that a function belonging to the shopping list object gets called with the recipe as an argument and the recipe gets stored in the shopping list array. Now the recipe is part of the state of both objects. What happens if you delete the recipe from the recipe list. Since the recipe is no longer available that means it will also have to be removed from the shopping list.

This is not a problem in a small application. The recipe can simply be removed from the arrays of both objects and we are all good. But consider a big app where 5 or 10 or 100 other objects and they all have hold data that is derived from the array in recipe list. That is a recipe for a coding nightmare.

Lets go back to React. React, Angular and other frameworks have emerged as a way to solve this an similar problems. React has this thing called one way binding. Lets say that the initial state of your application (the entire application) can be described with a single JSON object. You can then pass this object to the root of you React app, which can then pass parts of this object as props to its children components and so on. Each component in this tree hierarchy potentially display part of the information. In essence your UI is a function of your state. If you pass the same parameter value (application state) twice through your function (React code) you should get the same output (user interface). So the data “flows” one way. A component doesn’t know of about other components that are above him in the hierarchy. For that matter a component doesn’t know about other components that are on the same level but in another branch of the tree hierarchy.

This sounds pretty cool, because the only thing you need to keep track of is your application state object, instead of all the states of each component. But there is a big problem. What if you want to change the application state through the UI? Well this where it gets interesting. React on itself doesn’t really have a good way to alter application state. This is where I would make the separation between application state and component state. The state of a component (that is the property that you can change with setState) is sufficient if you want to make a change, which affects only the component that the state belongs to. For example a component which adds two numbers and displays the result. You get the two numbers from input fields and whenever the value of an input field changes a function is called which sets the new state. React then updates the displayed value to reflect the new state. However only that component is affected by the change in state.

So what can be done if we want the change the state of component that is higher in the hierarchy. By default in React you can do the following. Define a function in the parent component (don’t forget to bind) and pass it as a prop to the child component. The child component can then call the function, which will in the turn update the state of the parent component with setState.

In your app the recipe list and the shopping list don’t have a parent child relationship. In this case you should look for a component in the tree that is a parent to both of them. You can define the function in that component and pass it as a prop.

Once again however you have the problem of big applications. If there are 10 levels in the tree hierarchy and the common parent of two components is the root component of the application that means that the property with the update function needs to be passed down through all 10 levels.

A good way to solve this problem is to use a state container like redux. There are many great places to learn redux and I don’t want to get into it since this post is already way longer than I expected.

I hope I helped a bit and I didn’t brought even more confusion :S.

1 Like