Happening place to discuss this tutorial: 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 ran…

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 o…

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

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…

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: 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…

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:

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 …

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 = { paddi…

kirupaForum

Going from Data to UI in React

programming

Topic		Replies	Views
I need help Chapter 9 in book learning react web dev	2	538	April 16, 2021
Using Redux with React programming	12	1776	February 25, 2020
How to give each letter a different color - Learning React? web dev	1	395	January 2, 2023
React	5	550	February 10, 2023
Accessing DOM Elements in React \| kirupa.com programming	6	1110	March 27, 2018

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Loose Ends

What is a Kirupa?
About the Site
Handy Tools
Get Help

Going from Data to UI in React

Related topics

Follow:

Popular

Loose Ends