# Going from Data to UI in React

**URL:** <https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233>\
**Category:** programming\
**Created:** [March 20, 2017, 7:52am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233 "2017-03-20T07:52:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 7:52am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/1 "2017-03-20T07:52:34Z")

</div>

Happening place to discuss this tutorial: http://www.kirupa.com/react/from\_data\_to\_ui\_in\_react.htm

---

<div class="post-metadata">

**Author:** ![Dridge](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@Dridge](https://forum.kirupa.com/u/Dridge)\
**Post date:** [April 26, 2017, 9:55am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/2 "2017-04-26T09:55:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 27, 2017, 12:30am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/3 "2017-04-27T00:30:22Z")

</div>

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 😛

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![Dridge](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@Dridge](https://forum.kirupa.com/u/Dridge)\
**Post date:** [April 27, 2017, 7:41am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/4 "2017-04-27T07:41:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chamal\_Kayssar](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chamal_kayssar/32/8957_2.png) [@Chamal\_Kayssar](https://forum.kirupa.com/u/Chamal_Kayssar)\
**Post date:** [January 24, 2018, 7:07pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/5 "2018-01-24T19:07:14Z")

</div>

Hello,  
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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 25, 2018, 7:10am UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/6 "2018-01-25T07:10:21Z")

</div>

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? 🙂

---

<div class="post-metadata">

**Author:** ![Chamal\_Kayssar](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chamal_kayssar/32/8957_2.png) [@Chamal\_Kayssar](https://forum.kirupa.com/u/Chamal_Kayssar)\
**Post date:** [January 25, 2018, 4:14pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/7 "2018-01-25T16:14:55Z")

</div>

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

```auto
                           A
                         / \
                        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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 25, 2018, 5:35pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/8 "2018-01-25T17:35:46Z")

</div>

Ah! That is exactly the kind of scenario Redux can help you with. Take a look at the [Redux Introduction](https://www.kirupa.com/react/introduction_to_redux.htm) and then the article on how to integrate [Redux into your React App](https://www.kirupa.com/react/using_redux_with_react.htm) 🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 25, 2018, 6:05pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/9 "2018-01-25T18:05:08Z")

</div>

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:

https://codepen.io/anon/embed/preview/VyJEVM?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=VyJEVM

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 31, 2018, 5:27pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/10 "2018-01-31T17:27:52Z")

</div>

A post was split to a new topic: [React-redux error: Failed to execute ‘removeChild’ on ‘Node’](https://forum.kirupa.com/t/react-redux-error-failed-to-execute-removechild-on-node/637803)

---

<div class="post-metadata">

**Author:** ![MountainTrailRover](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mountaintrailrover/32/9219_2.png) [@MountainTrailRover](https://forum.kirupa.com/u/MountainTrailRover)\
**Post date:** [July 27, 2018, 12:14pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/11 "2018-07-27T12:14:49Z")

</div>

Morning,

I am attempting to get this set of circles to work, but am getting the error:

> ReferenceError: renderData is not defined[Learn More]

in my console. I’ve tried to move the renderData variable to multiple locations, but it doesn’t seem to resolve the issue. Currently I have it just below var circleStyle & var colors in the “render(){” section of the the code. See below:

[makingCirclesReact](https://forum.kirupa.com/uploads/short-url/xpT40VSViW2WBBdKu15k2DhK8zq) (1.4 KB)

If you have some time to point me in the right direction it would be appreciated. I’m sure I have the var defined in the wrong spot I just don’t know how to fix it.

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 27, 2018, 5:16pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/12 "2018-07-27T17:16:59Z")

</div>

Hi MountainTrailRover! You were really close. The code for render data and the array for populating it needs to live outside of the `Circle` component. Here is what the code inside the script tag should look like:

```
class Circle extends React.Component {
  render() {
    var circleStyle = {
      padding: 10,
      margin: 20,
      display: "inline-block",
      backgroundColor: this.props.bgColor,
      borderRadius: "50%",
      width: 100,
      height: 100
    };
    return (
      <div style={circleStyle}>
      </div>
    );
  }
}

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"];

var renderData = [];

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

ReactDOM.render(
    <div>
    {renderData}
    </div>,
    document.querySelector("#container")
  );

```

This should do the trick…hopefully! If it doesn’t work, please reply back and we can look at some other solutions.

Cheers,  
Kirupa 😄

---

<div class="post-metadata">

**Author:** ![MountainTrailRover](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mountaintrailrover/32/9219_2.png) [@MountainTrailRover](https://forum.kirupa.com/u/MountainTrailRover)\
**Post date:** [July 28, 2018, 12:16pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/13 "2018-07-28T12:16:37Z")

</div>

Morning!

That worked beautifully, thanks for taking some time to reply. So the other variable for component Circle lives inside that component. Does the array get defined outside of it so you are able call multiple components?

Thanks again!

Cheers,  
James

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 28, 2018, 5:12pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/14 "2018-07-28T17:12:58Z")

</div>

Are you referring to the `circleStyle` variable? If so, that one is localized just for that component. It is designed to specify how our circle looks. You can totally put that outside of the component as well to have other components use it if you want.

The reason the `colors`, `renderData`, and `for` loop are defined outside is that we need to populate `renderData` for rendering inside `ReactDOM.render`. If we defined all of them inside the `Circle` component, you can’t easily access them outside of it.

I explain a bit more about all of this in the following tutorial: [Variable Scope Basics in JavaScript](https://www.kirupa.com/html5/variable_scope_js.htm).

---

<div class="post-metadata">

**Author:** ![jetuala](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jetuala](https://forum.kirupa.com/u/jetuala)\
**Post date:** [March 21, 2019, 4:39pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/15 "2019-03-21T16:39:53Z")

</div>

Hi!

I am absolutely LOVING this book so far! In this chapter, however, I ran into a problem that I don’t quite know how to figure out. I’m trying to get React to render the circles with different background colors found in our array, but Chrome keeps giving me the error:

Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

I’m not trying to import/export anything particular (haven’t gotten to that part of the book yet!) I’ve Googled for a while, but haven’t found anything helpful that doesn’t have to do with importing/exporting. Can anyone help??

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 21, 2019, 4:58pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/16 "2019-03-21T16:58:40Z")

</div>

Can you share your code? That does sound like a strange error to be getting at this point 🙂

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![jetuala](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jetuala](https://forum.kirupa.com/u/jetuala)\
**Post date:** [March 21, 2019, 5:10pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/17 "2019-03-21T17:10:17Z")

</div>

```
<!DOCTYPE HTML>

<html>

<head>
  <meta charset="utf-8">
  <title>From Data to UI</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="container"></div>
</body>

<script type="text/babel">
  var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363",
      "#85FFC7", "#297373", "#FF8552", "#A40E4C"];

  var renderData = [];

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

  class Circle extends React.Component {
    render() {
      var circleStyle = {
        padding: 10,
        margin: 20,
        display: "inline-block",
        backgroundColor: this.props.bgColor,
        borderRadius: "50%",
        width: 100,
        height: 100,
      };

      return (
        <div style={circleStyle}>
        </div>
      );
    }
  }

  ReactDOM.render(
    <div>
      {renderData}
    </div>,
    document.querySelector("#container")
  );
</script>

</html>

```

(I hope this is formatted correctly.)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 21, 2019, 9:43pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/18 "2019-03-21T21:43:10Z")

</div>

You formatted it correctly! 🙂

The problem is very subtle. If you move your `for` loop just after the `Circle` class block, your code will work:

```
var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"];

var renderData = [];

class Circle extends React.Component {
  render() {
    var circleStyle = {
      padding: 10,
      margin: 20,
      display: "inline-block",
      backgroundColor: this.props.bgColor,
      borderRadius: "50%",
      width: 100,
      height: 100
    };

    return (
      <div style={circleStyle}>
      </div>
    );
  }
}

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

ReactDOM.render(
  <div>
    {renderData}
  </div>,
  document.querySelector("#container")
);

```

@senocular or @krilnon can go into much greater detail as to why this happens, but the `Circle` component you are pushing doesn’t exist when it is used before the actual `Circle` class declaration. This is all part of the JS quirks behind something known as [**hoisting**](https://www.kirupa.com/html5/hoisting.htm). For classes, you must declare them before accessing/initializing them later in your code.

🙂

---

<div class="post-metadata">

**Author:** ![jetuala](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jetuala](https://forum.kirupa.com/u/jetuala)\
**Post date:** [March 21, 2019, 10:12pm UTC](https://forum.kirupa.com/t/going-from-data-to-ui-in-react/636233/19 "2019-03-21T22:12:07Z")

</div>

Wonderful, it worked! I actually ran into the same problem on my last project, but never figured out what the formal name for the issue is. Thank you so much for your help!!