Going from Data to UI in React | kirupa.com


by kirupa | 10 October 2016

When you are building your apps, thinking in terms of props, state, components, JSX tags, render methods, and other React-isms may be the last thing on your mind. Most of the time, you are dealing with data in the form of JSON objects, arrays, and other data structures that have no knowledge (nor interest) in React or anything visual. Bridging the gulf between your data and what you eventually see can be frustrating! Not to worry, though. This article will help reduce some of those frustrating moments by running through some common scenarios you'll encounter!

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/from_data_to_ui_in_react.htm


Thank you for this wonderful article! There seems to be a mistake though I believe. When we add a key to each JSX component we push to the array, it should say:

 for (var i = 0; i < colors.length; i++) {
   renderData.push(<Circle key={i + colors[i]} bgColor={colors[i]}/>);

Otherwise, only a randomised circle will be displayed.


Dridge - the snippet I posted towards the end does something very similar:

for (var i = 0; i < colors.length; i++) {
  var color = colors[i];
  renderData.push(<Circle key={i + color} bgColor={color}/>);

I just created a color variable that stores the value of colors[i]. The end result between our code should be the same, right? Or am I overlooking something? It’s been one of those days :stuck_out_tongue:



:joy: I totally overlooked the statement “var color = colors[i];”. Sorry and thanks again! :slight_smile:


I followed your step one by one as you did here, but I need to copy the background color of each button either to text color or background color of another component which is not a parent. I have create two rows of buttons; one to be used for text color and the other for the background color. How to use these background color from the parent to send them to other child. Hopefully you write the whole code. Thank you.


I am having difficulty visualizing what you are describing. Do you have a diagram that illustrates the arrangement of the components and what values you are trying to transfer to which destination? :slight_smile:


Yes, let’s say that the diagram like the following:

                         /   \
                        B     C
                      /   \
                     D     E

The D and E are the components that each include a class of creating a button and a list of color to style the background of the button, as you did here. B is a parent and instead of creating the next component as you did, I immediately placed the result of the list inside it. So I need to transfer the background color from either D or E to C. I have created a constructor in A to have a connection between B and C, but it didn’t work.I am beginner and need your help. Thank you.


Ah! That is exactly the kind of scenario Redux can help you with. Take a look at the Redux Introduction and then the article on how to integrate Redux into your React App :slight_smile:


And if redux seems overwhelming,

I have created a constructor in A to have a connection between B and C, but it didn’t work.

Seems like you were on the right track. You just need to manage everything through A, the common parent of them all. Here’s an example:


A post was split to a new topic: React-redux error: Failed to execute ‘removeChild’ on ‘Node’