How to concatenate values within a class in React.JS

Question

How to concatenate values within a class in React.JS

Navigation

#1 by (1 votes)

1

I have the following code:

{
    this.state.listSkills.map(function(habilidade){
    return (
        <ul className="habilidades">                                            
            <li className="habilidade-"{habilidade.value}>
                <h2>{habilidade.name}
                <div className="barra"><span></span></div>
                </h2>
            </li>
        </ul>
        );
    })
}

The value of the variable habilidade.value comes from a dynamic json with a value and a percentage symbol ( % ), example: 10% .

I need to concatenate the string "habilidade" with this variable and get the % to be class="habilidade-10" . How to do?

react

asked by anonymous 11.02.2018 / 12:34

1 answer

Java - Read file and save output in .txt Changing a value with the pandas library

score 1 · Accepted Answer

In react, you can use javascript codes within component properties using the keys ( {} ).

This is very useful when you need to concatenate values or call functions.

So, to concatenate the "habilidade-" with the habilidade.value in the className property, you can do this:

className={"habilidade-" + habilidade.value}

To get the value of % you can give a replace in the string, like this:

className={"habilidade-" + habilidade.value.replace('%', '')}