DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Recursive list rendering with React and Vue
Shuvo
Shuvo

Posted on

Recursive list rendering with React and Vue

Sometimes your list may have a sublist inside it which again may have another sublist in it.
Twitter thread tree demo
In that case simple loop won't work. You have to use recursion.

So let's see how we can render recursive list using React JS.

Since react supports JSX and we can use regular JavaScript functions so we can simply use a recursive function.

//App.js
function App(){
    const list = [
        { type: "item", title: "Wakeup", color: "blue" },
        { type: "item", title: "Get Fresh", color: "blue" },
        { type: "item", title: "Study", color: "blue" },
        {
            type: "list",
            items: [
                { type: "item", title: "Study JavaScript", color: "green" },
                { type: "item", title: "Study OOP", color: "green" },
                {
                    type: "list",
                    items: [
                        { type: "item", title: "Make game using OOP", color: "red" }
                    ]
                },
                { type: "item", title: "Study NodeJs", color: "green" },
            ]
        }
    ]

    function renderList(list){
        const listTree = list.map(item => {
            if(item.type == "item"){
                return (
                    <div className="list-item">
                        <span className="border" style={{background: item.color}}></span>
                        <span className="title">{ item.title }</span>
                    </div>
                )
            }else{
                return (
                    <div className="list">
                        { renderList(item.items) }
                    </div>
                )
            }
        })
        return (
            <div className="list">
                { listTree }
            </div>
        )
    }

    return (
        <div>
            <h1>My Nested ToDo List-</h1>
            { renderList(list) }
        </div>
    )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Now depending on how you style it in CSS it should look something like this.
Recursive list demo

Now let's see how to render recursive list in Vue JS.

Now we can't use recursive JavaScript function in Vue like we did in react but We can use recursive component.

To be able to use component recursively it must have a name properly!!!

App.vue

<template>
    <div>
        <h1>My Nested ToDo List-</h1>
        <RenderList :list="list" />
    </div>
</template>
<script>
import RenderList from "./components/RenderList.vue"
export default {
    components: {
        RenderList
    },
    data: () => ({
        list: [
            { type: "item", title: "Wakeup", color: "blue" },
            { type: "item", title: "Get Fresh", color: "blue" },
            { type: "item", title: "Study", color: "blue" },
            {
                type: "list",
                items: [
                    { type: "item", title: "Study JavaScript", color: "green" },
                    { type: "item", title: "Study OOP", color: "green" },
                    {
                        type: "list",
                        items: [
                            { type: "item", title: "Make game using OOP", color: "red" }
                        ]
                    },
                    { type: "item", title: "Study NodeJs", color: "green" },
                ]
            }
        ]
    })
}
</script>
Enter fullscreen mode Exit fullscreen mode

RenderList.vue

<template>
    <div class="list">
        <div v-for="item in list" :key="item.title" :class="{'list': item.type == 'list', 'list-item': item.type == 'item'}">
            <span v-if="item.type == 'item'" class="border" :style="{background: item.color}"></span>
            <span v-if="item.type == 'item'" class="title">{{ item.title }}</span>
            <RenderList v-if="item.type == 'list'" :list="item.items" />
        </div>
    </div>
</template>
<script>
export default {
    name: "RenderList",
    props: ['list']
}
</script>
Enter fullscreen mode Exit fullscreen mode

Again depending on how you style it in CSS it should look something like this.
Recursive list demo

Make sure to check out my other articles and YouTube channel.

0shuvo0 image

Top comments (0)

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket