CODEWITHSUNDEEP
javascriptreactjs
DaOneRom
DaOneRom

Reputation: 294

Create dynamic classname followed by incrementing value with Reactjs

I have a component that renders a list. Each item has a classname. My question is how can I dynamically add a classname followed by an incrementing value.

function Menu(props) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className="menuitem" key={index}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

In the DOM, it should look like this: 

<ul>
    <list class="menuitem item-1">list1</li>
    <list class="menuitem item-2">list2</li>
    <list class="menuitem item-3">list3</li>
</ul>

Upvotes: 0

Views: 77

Answers (5)

Mahdi Amiri
Mahdi Amiri

Reputation: 349

Try This :

function Menu(props = null) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return `<li className="menuitem item-${index + 1}" key="${index}">${list}</li>`
    });

    return (
        `<ul>${menuitems.join(" ")}</ul>`
    )
}

Upvotes: 2

Dostonbek Oripjonov
Dostonbek Oripjonov

Reputation: 1674

This should work 

function Menu(props) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {<li className=`menuitem itme-${index + 1}>{list}</li>})
    return <ul>{menuitems}</ul> 
}

Upvotes: 0

saurssaurav
saurssaurav

Reputation: 773

Try this

const menuitems = list.map((list, index) => {
        return <li className={`menuitem item-{index+1}`} key={index}>{list}</li>
    })

Upvotes: 1

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

It's pretty simple =)

function Menu(props) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className={`menuitem item-${index + 1}`} key={index}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

It uses JSX Expression { - expression code lives here - }. You can place any valid JS expression between curly braces.

Upvotes: 3

demkovych
demkovych

Reputation: 8887

You could use package called classnames or:

<li className={`menuitem-${index}`} key={index}>{list}</li>

Upvotes: 1

Related Questions