Create dynamic classname followed by incrementing value with Reactjs

Question

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>

You can add a incrementing value as the state of the class and increase every time you want dynamically add a classname, so create a function that add to the list this classname. The renderPart of the list you already have done it. — P4uB0rd4
– P4uB0rd4, Commented Sep 18, 2019 at 10:27

Ivan Burnaev · Accepted Answer · 2019-09-18 10:26:38Z

3

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.

answered Sep 18, 2019 at 10:26

Ivan Burnaev

2,73021 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Burnaev Over a year ago

I'm glad to help!

Mahdi Amiri · Accepted Answer · 2019-09-18 10:43:25Z

2

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>`
    )
}

answered Sep 18, 2019 at 10:43

Mahdi Amiri

3591 silver badge15 bronze badges

Comments

demkovych · Accepted Answer · 2019-09-18 10:26:26Z

1

You could use package called classnames or:

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

answered Sep 18, 2019 at 10:26

demkovych

9,0453 gold badges23 silver badges27 bronze badges

1 Comment

DaOneRom Over a year ago

This is hhelpful too. Thank you.

saurssaurav · Accepted Answer · 2019-09-18 10:28:18Z

1

Try this

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

answered Sep 18, 2019 at 10:28

saurssaurav

7731 gold badge8 silver badges19 bronze badges

Comments

Dostonbek Oripjonov · Accepted Answer · 2019-09-18 10:32:54Z

0

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> 
}

answered Sep 18, 2019 at 10:32

Dostonbek Oripjonov

1,6941 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Create dynamic classname followed by incrementing value with Reactjs

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related