I need help Chapter 9 in book learning react

programming web dev
1

I use code:

<! DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">

	<title>От данных к интерфейсу</title>

	<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/[email protected]/babel.min.js"></script>

	<style>
		#container {
			padding: 50px;
			background-color: #FFF;
		}
	</style>

</head>

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

	<script type="text/babel">
		var destination = document.querySelector("#container");
		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>,
			destination
		);
	</script>
</body>
</html>

error code:
react.development.js:401 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.

2

Hi @Fallin - you need to define your Circle class prior to using it inside the loop. Here is your code with this modification:

<!DOCTYPE html>
  <html>

  <head>

    <meta charset="utf-8">

    <title>От данных к интерфейсу</title>

    <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/[email protected]/babel.min.js"></script>

    <style>
      #container {
        padding: 50px;
        background-color: #FFF;
      }
    </style>

  </head>

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

    <script type="text/babel">
      var destination = document.querySelector("#container");
      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>,
        destination
      );
    </script>
  </body>

  </html>

Let me know if you are now able to see the example working :slight_smile:

Cheers,
Kirupa

1 Like
3

it work!
Thank you :grin:

1 Like