{"id":2719,"date":"2018-11-23T12:00:47","date_gmt":"2018-11-23T12:00:47","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2719"},"modified":"2018-11-23T12:00:47","modified_gmt":"2018-11-23T12:00:47","slug":"creating-list-component-in-reactjs","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/creating-list-component-in-reactjs\/","title":{"rendered":"Creating List Component in ReactJs"},"content":{"rendered":"

Note: This is part 3 of three-part prerequisite post series. A\u00a0 prior knowledge of these topics is essential before deep diving into Creating List React component<\/em>.<\/p>\n

In the previous learning-note post\u00a0Learning to Work With React Components<\/a>, how to build a simple react component using run time <script><\/code>in a HTML file were discussed. Although slow, this approach is not ideal for react app development, however it is ideal for my current learning purposes.<\/p>\n

The purpose of this learning-note post is understand how to build a simple list react component and apply that knowledge to build BlogPost<\/code> component to list posts in a page.<\/p>\n

JavaScript Prerequisite<\/h5>\n

Because creating List component ReactJS<\/a> is advanced topic, it requires working JS knowledge in the following areas:<\/p>\n

Post Series<\/strong>
\nPart 1: JavaScript Fundamentals – Array.Map(), Arrow Functions & Functions<\/a>
\nPart 2: How to Pass Props (Data Objects) to Component in ReactJS<\/a>
\nPart 3<\/strong>: Creating List React Component (this post<\/strong>)<\/div>\n

In Part 2, what are props and how props objects are used to pass data from from one component to other is discussed. In this part 3 of three part series, ES6 array.map()<\/code> method is used to transform array of items into list of React element is discussed.<\/p>\n

The purpose of this learning-note post is understand how to build a simple list react component and apply that knowledge to build BlogPost<\/code> component to list posts in a page.<\/p>\n

Iterations of Items – The Basic
\n<\/strong><\/h6>\n

Iteration of items<\/a> is a very basic process and JS provides simple for<\/code><\/a> loops to map()<\/code><\/a> and filter()<\/code><\/a> to iterate collection of items (eg. array). In previous posts: Understanding JavaScript Arrays<\/a> & Learning JavaScript Array Methods<\/a> are discussed in detail. In Part 1<\/a> of this series how Array.Map()<\/code> method is used in React to iterate items in an array is discussed. In the following section, how list of items in array are transform into list of React element<\/a> is discussed.<\/p>\n

List & Keys in ReactJs<\/h4>\n

React Guide<\/a> documentation provides an excellent overview of how lists & keys<\/a> are used by react to transform array objects into lists of elements<\/a>. Examples used in this section are adopted from the Lists and Keys<\/a> section of the react Guide.<\/p>\n

1. Transforming JS Arrays into React Elements<\/h6>\n

Using the JS map()<\/code><\/a> method discussed in the previous post<\/a>, an array of numerical values are listed.<\/p>\n

\/* JS syntax - numerical*\/\nconst numbers = [10, 20, 30, 40, 50];\nconst halves = numbers.map((number) => number \/ 2);\nconsole.log(halves);\/\/ 5, 10, 15, 20, 25<\/code><\/pre>\n
In the example above, JS map()<\/code> function is used to list an array of <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Number" target="_blank" rel="noopener">numbers<\/a><\/code> (line 2) and their values are divided into halves<\/em> (line 3). The returned value from the map()<\/code> function, which is an new array, is assigned to a variable halves<\/code> (line 3). The console.log<\/code> result shows [5, 10, 15, 20, 25]<\/code> (line4).<\/p>\n
The map()<\/code> function can also be applied to an array of <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String" target="_blank" rel="noopener">string<\/a><\/code> items as shown below:<\/p>\n
\/* JS syntax   - strings*\/\nconst items = ['React', 'JavaScript', 'WordPress', 'Gutenberg'];\nconst newItems = items.map((item) => item);\nconsole.log(newItems);\n\/\/OUTPUT\n["React", "JavaScript", "WordPress", "Gutenberg"]<\/code><\/pre>\n
The console.log<\/code> output above (line 10) shows returned value of newItems<\/code> array (line 7), which is a new array returned by map()<\/code> function on the original items<\/code> array (line 6).<\/p>\n
Transforming an array into list of\u00a0 <a href="https:\/\/reactjs.org\/docs\/rendering-elements.html" target="_blank" rel="noopener">elements<\/a><\/code><\/strong> is achieved by including them in JSX using curly braces { }<\/code><\/a>. In the example below, the same numbers<\/em> and items<\/em> JS array from above will be used to render as react component.<\/p>\n
\/* react component*\/\nconst numbers = [10, 20, 30, 40, 50];\nconst halves = numbers.map((number) => \n  <li>number<\/li>\n);\n\n\/\/rendering to DOM\nReactDOM.render(\n  <ul>{halves}<\/ul>,\n  document.getElementById('root')\n);\n\/\/OUTPUT\n5\n10\n15\n20\n25<\/code><\/pre>\n
In the example above, the JS map()<\/code> function is applied to numbers<\/code> array except that the individual number<\/code> items from the new halves<\/code> array is returned as <li><\/code> element (line 4).<\/p>\n
To render the individual number of halves<\/code> array in react DOM, the entire halves<\/code> array is included inside <ul><\/code> element (line 9) as JSX expression {}<\/code> and rendered to the DOM (lines: 8-11). The rendered output shows unordered bullet list of halved<\/code> numbers (lines: 13-17).<\/p>\n
Similarly, we can use the items<\/code> array from above to iterate individual item using JS map()<\/code> function.<\/p>\n
\/* react component- strings*\/\nconst items = ['React', 'JavaScript', 'WordPress', 'Gutenberg'];\nconst newItems = items.map((item) => \n  <li>item<\/li>\n);\n\n\/\/rendering to DOM\nReactDOM.render(\n  <ul>{newItems}<\/ul>,\n  document.getElementById('root')\n);\n\/\/OUTPUT\nReact\nJavaScript\nWordPress\nGutenberg<\/code><\/pre>\n
Similar to previous halves<\/code> array, in the example above each item<\/code> from items<\/code> array (line 19) from the new newItems<\/code> array (line 20) are returned as <li><\/code> element (line 21). Then the newItems<\/code> is passed through ReactDOM to render as {newItems}<\/code> JSX element (line 26) and render it to the DOM (lines: 25-28). The react component renders unordered list of item<\/code> as shown in lines 30-33.<\/p>\n
The following flowchart (adopted from Trey Alexender Davis’s post<\/a>) displays visually how array of data are transformed into react list component.<\/p>\n
\"\"