React - Rendering Component Collection or Lists

Hello There! So far, we have seen how we can use states, props and CSS in our components.

In real time applications, states or props will hold values such as objects, lists, arrays and we need to render them on the DOM. The length of such collection may not be available beforehand as it might come from a data store or through a HTTP web service and it will vary on case to case basis.

Imagine, we have a library of Books. At the start, we only had 3 books in the collection. So we can render these 3 books simply by referring Book component 3 times, each for a specific book as seen in the example below:


    class BookLibrary extends React.Component {

    render() {
        const books = [
        {
            id: 1,
            title: "Life's Amazing Secrets",
            author: "Gaur Gopal Das",
            coverImage: "./images/lifes-amazing-secrets.jpg",
            description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, corporis!",
        },
        {
            id: 2,
            title: "The Alchemist",
            author: "Paulo Cohlo",
            coverImage: "./images/the-alchemist.jpg",
            description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, corporis!",
        },
        {
            id: 3,
            title: "Grandma's Bag of Stories",
            author: "Sudha Murthy",
            coverImage: "./images/grandmas-bag-of-stories.jpg",
            description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, corporis!",
        },
        ];

        return (
        <>
            <section className="booklist">
            {/* book 1 */}
            <Book book={books[0]} />
           
            {/* book 2 */}
            <Book book={books[1]} />
           
{/* book 3 */}
            <Book book={books[2]} />
            </section>
        </>
        );
    }
    }

    ReactDOM.render(<BookLibrary />, document.getElementById("container"));

We are passing book to a book-component to display its details.

But eventually the library collection grows to 10. So, going by what we saw earlier, section where we refer book component to render our books will now look like:


    return (
      <>
        <section className="booklist">
          {/* book 1 */}
          <Book book={books[0]} />
       
          {/* book 2 */}
          <Book book={books[1]} />
       
          {/* book 3 */}
          <Book book={books[2]} />
       
  {/* book 4 */}
          <Book book={books[3]} />
       
          {/* book 5 */}
          <Book book={books[4]} />
       
          {/* book 6 */}
          <Book book={books[5]} />
       
          {/* book 7 */}
          <Book book={books[6]} />
       
          {/* book 8 */}
          <Book book={books[7]} />
       
          {/* book 9 */}
          <Book book={books[8]} />
       
          {/* book 10 */}
          <Book book={books[9]} />
        </section>
      </>
    );
 

If our library keeps growing and eventually expected to have thousands of books, then its evident that rendering books using above method is not sufficient, maintainable as well as it is repetitive, leaving opportunities for bugs in case the book collection count changes.

We can use Component Collection technique (or List Rendering technique) to render in such instances.

Component collection rendering is a technique in which we dynamically create react elements by traversing through the data collection or lists.

The important part is to return such collection which then sits in the component list and gets rendered to the DOM.

There are 2 ways to do this:

  1. Using function or helper method
  2. Inline iteration
Lets look at each in detail.

Using function or helper method

  • We traverse through a collection using any of the traversing methods.
  • If we are traversing arrays, it is recommended to use various inbuilt array methods such as map, filter, reduce etc. Refer MDN document for more details.
  • All such methods takes function as an input.
  • Arguments to this function are current element and index.
  • We can work with the current element from the array, set relevant values and return the collection. 
  • Also make sure that the key property is also setup appropriately, as this is required by react during reconciliation.
  • While rendering the collection, we can either call the function directly or capture that in an object and use that.
  • Please note that the function will be returning a collection of react elements!
  • Example:
  • Lets define a function called as bookRenderer(), which will take book list or collection and returns react elements ready for rendering.


    •     const bookRenderer = (books) => {
          //return dynamically built, ready to render collection of books
          return books.map((book, index) => {
              //as we are using arrow function, we need to return this explicitly
              return <Book key={book.id} book={book} />;
          });
          };


  • Call bookRenderer() where want to render
    • Method 1 - Render collection by directly calling the function

    •     return (
          <>
              <section className="booklist">{bookRenderer(books)}</section>
          </>
          );

    • Method 2 - save collection in a object and use it

      •     const bookRenderer = (books) => {
            //return dynamically built, ready to render collection of books
            return books.map((book, index) => {
                //as we are using arrow function, we need to return this explicitely
                return <Book key={book.id} book={book} />;
            });
            };

            //save react collection in an object
            const reactBookCollection = bookRenderer(books);
            return (
            <>
                {/* render collection using object */}
                <section className="booklist">{reactBookCollection}</section>
            </>
            );


  • Inline iteration/render

    • How to write logic remains same as function/helper method

    • Instead of creating dedicated function, we move the logic inside JSX directly

    • Instead of moving the iteration logic to a function, we keep it inside the JSX as seen below:


  •     return (
        <>
            <section className="booklist">
            {/* 1. using curly brackets {}*/}
            {/*return dynamically built, ready to render collection of books*/}

            {books.map((book) => (
                <Book key={book.id} book={book} /> //arrow function, implicit return
            ))}
            </section>
        </>
        );

  • Please make sure that there is a key property set for every child element being rendered as a part of this process.
  • Both options for rendering collections are same but there is a reusability and clean code factor with functions, that will vary from case to case basis.




Comments

Post a Comment

Popular Posts