Creating List Component in ReactJs

Note: This is part 3 of three-part prerequisite post series. A  prior knowledge of these topics is essential before deep diving into Creating List React component.

In the previous learning-note post Learning to Work With React Components, how to build a simple react component using run time <script>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.

The purpose of this learning-note post is understand how to build a simple list react component and apply that knowledge to build BlogPost component to list posts in a page.

JavaScript Prerequisite

Because creating List component ReactJS is advanced topic, it requires working JS knowledge in the following areas:

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() method is used to transform array of items into list of React element is discussed.

The purpose of this learning-note post is understand how to build a simple list react component and apply that knowledge to build BlogPost component to list posts in a page.

Iterations of Items – The Basic

Iteration of items is a very basic process and JS provides simple for loops to map() and filter() to iterate collection of items (eg. array). In previous posts: Understanding JavaScript Arrays & Learning JavaScript Array Methods are discussed in detail. In Part 1 of this series how Array.Map() 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 is discussed.

List & Keys in ReactJs

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

1. Transforming JS Arrays into React Elements

Using the JS map() method discussed in the previous post, an array of numerical values are listed.

/* JS syntax - numerical*/
const numbers = [10, 20, 30, 40, 50];
const halves = numbers.map((number) => number / 2);
console.log(halves);// 5, 10, 15, 20, 25

In the example above, JS map() 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> (line 2) and their values are divided into halves (line 3). The returned value from the map() function, which is an new array, is assigned to a variable halves (line 3). The console.log result shows [5, 10, 15, 20, 25] (line4).

The map() 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> items as shown below:

/* JS syntax   - strings*/
const items = ['React', 'JavaScript', 'WordPress', 'Gutenberg'];
const newItems = items.map((item) => item);
console.log(newItems);
//OUTPUT
["React", "JavaScript", "WordPress", "Gutenberg"]

The console.log output above (line 10) shows returned value of newItems array (line 7), which is a new array returned by map() function on the original items array (line 6).

Transforming an array into list of  <a href="https://reactjs.org/docs/rendering-elements.html" target="_blank" rel="noopener">elements</a> is achieved by including them in JSX using curly braces { }. In the example below, the same numbers and items JS array from above will be used to render as react component.

/* react component*/
const numbers = [10, 20, 30, 40, 50];
const halves = numbers.map((number) => 
  <li>number</li>
);

//rendering to DOM
ReactDOM.render(
  <ul>{halves}</ul>,
  document.getElementById('root')
);
//OUTPUT
5
10
15
20
25

In the example above, the JS map() function is applied to numbers array except that the individual number items from the new halves array is returned as <li> element (line 4).

To render the individual number of halves array in react DOM, the entire halves array is included inside <ul> element (line 9) as JSX expression {} and rendered to the DOM (lines: 8-11). The rendered output shows unordered bullet list of halved numbers (lines: 13-17).

Similarly, we can use the items array from above to iterate individual item using JS map() function.

/* react component- strings*/
const items = ['React', 'JavaScript', 'WordPress', 'Gutenberg'];
const newItems = items.map((item) => 
  <li>item</li>
);

//rendering to DOM
ReactDOM.render(
  <ul>{newItems}</ul>,
  document.getElementById('root')
);
//OUTPUT
React
JavaScript
WordPress
Gutenberg

Similar to previous halves array, in the example above each item from items array (line 19) from the new newItems array (line 20) are returned as <li> element (line 21). Then the newItems is passed through ReactDOM to render as {newItems} JSX element (line 26) and render it to the DOM (lines: 25-28). The react component renders unordered list of item as shown in lines 30-33.

The following flowchart (adopted from Trey Alexender Davis’s post) displays visually how array of data are transformed into react list component.

2. Deep Diving into Basic List Component

The numbers and items array elements from above can be refactored to a basic list component as shown below. Example adopted from Basic List Component (React Guide).

Step 1. A very basic react component (functional) syntax.

//functional component syntax
function CompName(props) {
  //mapping code with <li> element
  return (
    //return JSX element with <ul> element
  );
}
//rendering component to DOM
ReactDOM.render(
  <CompName/>,
  document.getElementById('root')
);

A basic functional (stateless) component receives props (line 2) returns JSX element (lines: 4-6). Then the react component is passed to the ReactDOM as first parameter (line 10) and rendered to DOM.

Step 2: Refactoring above numbers and items array elements into a basic Numbers list component, as shown below:

//a basic functional component
function Numbers(props) {
  const numbers = props.numbers;
  const listedNum = numbers.map((number) =>
   <li>{number}</li>
  );
  return (
    <ul>{listedNum}</ul>
  );
}

const numbers = [10, 20, 30, 40];
//render Numbers Component to DOM
ReactDOM.render(
  <Numbers numbers={numbers} />,
  document.getElementById('root')
);

In the example above, Numbers component receives props (line 2) and numbers array data (line 12) are defined as props.numbers & stored in numbers variable (line 3). The map() function is applied to numbers array and the individual number items from the new listedNum array is returned as <li> element (line 5). Finally, the new listedNum array (lne 4) is returned as <ul> list JSX element {listedItems} with curly braces(line 8).

The numbers props declared earlier in line 2 are defined as numbers array (line 12) and the Numbers component is passed to the ReactDOM as <Numbers numbers={numbers} (line 15).

The above code renders unordered bullet list of listedNum array (defined in line8). The code throws a warning in browser console (A) – each child in an array or iterator should have a unique “key” prop.

The error can be fixed by adding keys.element inside the <li> element (lines: 5-6). By replacing the codes between lines 5-6 with following codes, the above error can be rectified.

//add key element inside <li. element
 <li key={number.toString()}>
	{number}
	</li>
  );

Keys in Reacts

To quote from the React Guide a “key” is  ” a special string attribute you need to include when creating lists of elements“. Keys are required to identify items that are changed, added or removed from data.  Some key features of keys include:

• In a data array keys are placed inside <li> elements.

  //add key element inside <li. element
   <li key={number.toString()}>
  	{number}
  	</li>
    );

• Keys serve as a marker only and don’t get pass to components. If IDs are needed in components, it should be passed exclusively as props. The following example from The React Guide:

  //Add IDs explicitly
  const postsListed = posts.map((post) =>
    <Post
      key={post.id}
      id={post.id}
      title={post.title} />
  );

• Keys passed within arrays should be unique but not globally unique.
• Often data IDs are used as keys. The following example from The React Guide:

  //array id as keys
  const todoItems = todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  );

• If there is no stable data IDs, index value of data array can be used but discouraged, especially if order of items is expected to change. The following example from The React Guide:

  //array index as key
  const todoItems = todos.map((todo, index) =>
    // Only do this if items have no stable IDs
    <li key={index}>
      {todo.text}
    </li>
  );

Keys – An Use Case Example

In the following example, array of items code from above is refactored into Items list components. A key element is added inside the <li> element (line 5).

//basic Items component
function Items(props) {
  const items = props.items;
  const listedItems = items.map((item) =>
   <li key={item.toString()}>
	 {item}
	</li>
  );
  return (
    <ul>{listedItems}</ul>
  );
}

const items = ['React', 'JavaScript', 'WordPress', 'Gutenberg'];
ReactDOM.render(
  <Items items={items} />,
  document.getElementById('main')
);

The above code renders unordered bullet list of {listedItems} JSX element (line 10) from listedItems array  (ine 4).

The code with “keys” does not throw any warning in the browser console (shown above).

Additional Information: Lists & Keys | React Guide

Posts List Component: A Proof of Concept

As proof of concepts to create simple posts list component as well as better understand how keys are used in iteration of array items, examples from the React Guide and Trey Davis’s post were referred. This posts contains a heading and list of three posts with a title and some text.

Because this basic list component does not involve any state or life cycle methods, functional (stateless) components as recommended in React Guide were  used. Functional components are simple, easy to write & understand.

Step 1: Add Styling with Basic CSS

For styling the components, basic styles from Learning to Work With React Components were copied & used.

Step 2: Define an Array of Items

The following posts array contains three items each with id, title and text as properties.

// array of posts items
const posts = [
  {
    id: 1, 
    title: 'Hello World', 
    text: 'Welcome to learning React!'
   },
  {
    id: 2, 
    title: 'Learn React', 
    text: 'Start learning ReactJs.'
   },
  {
    id: 3, 
    title: 'Learn JavaScript', 
    text: 'Start learning JavaScript.'
   }
];

Step 3: Define Blog Component to List Posts

The following  Blog component with a props is defined as container component (lines: 19-43) with Header and postList as child components. The Header component (lines: 21-25) returns title.

As described in the previous sections, the map() function is applied to posts array (lines: 2-18) and the individual post items from the new postList array is returned as <div> JSX element (lines: 29-32) with title and text as JSX expression (lines: 30-31).

Finally, the Header and postList are returned as <div> list JSX element {Header} and {postList} with curly braces (lines: 36-40)

// define Blog component
function Blog(props) {
    const Header = (
	<div className="site-title-text">
	    <h1>Blog Post Listing</h1>
	 </div>	
	  );
 //define PostList component	 
  const postsList = props.posts.map((post) =>
    <div key={post.id}>
	<div className="entry-content">
	   <h2>{post.title}</h2>
	   <p>Content: {post.text}</p> 
	 </div>{/*.entry-content */}
    </div>
  );
  return (
    <div>
      {Header}
      <div className="site-main"> 
        {postsList}
      </div>{/*.site-main */}  
    </div>
  );
}

A visual explanation of the posts map() function in postList is shown below.

The above flow chart explains how props data are processed and passed to react components. The chart was inspired by Trey Alexander Davis’s Handling Data with Props in React.

Step 4: Render Blog Component

Finally, the entire Blog component is passed to ReactDOM.render() function (lines: 45-48) as first parameter where value of posts is defined as {post} JSX element.

//rendering Blog component to DOM
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('main')
);

The Blog component renders unordered list of posts and displays in the browser as shown below.

Additional Reading: Lists and Arrays in React by Trey Alexander Davis & React Guide

Wrapping Up

In this part 3 of the three-part essential prerequisite post series, how list of items in array are transform into list of React element were discussed with with use case examples. In the next post, how to create a simple blog posts listing and refactoring of codes into smaller components will be discussed.

Acknowledgements: This post was inspired by Trey A. Davis‘s Lists and Arrays in Rea post and React Guide documentation.

Next Post: Creating a Simple Blog Listing React Component

Useful Resources and Links

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.

• Lists and Arrays | Byte-sized React
• How To Create a React List Component | Andreas Reiterer
• List and Keys | React Guide
• Render Children in React Using Fragment or Array Components | CSS-TRICKS
• Rendering List of Elements in React With JSX | jasonjl.me