1

Tenho o seguinte código:

{
    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>
        );
    })
}

O valor da variável habilidade.value vem de um json dinâmico com um valor e um simbolo de porcentagem (%), exemplo: 10%.

Preciso concatenar a string "habilidade" com essa variavel e tirar o % para que fique class="habilidade-10". Como fazer?

5
  • Onde exatamente você precisa desse valor?
    – Francisco
    Commented 11/02/2018 às 11:36
  • no sass, para que eu possa usar quando ele for renderizado @for $i from 0 through 100{ li.habilidade-#{$i}{ .barra{ span{ width: 1% * $i; } } }
    – Felipe
    Commented 11/02/2018 às 11:38
  • 1
    Tente className={"habilidade-" + habilidade.value.replace('%', '')}
    – Francisco
    Commented 11/02/2018 às 11:41
  • Deu certo, muito obrigado!
    – Felipe
    Commented 11/02/2018 às 11:46
  • Criei uma resposta para ajudar outros usuários que tiverem o mesmo problema futuramente. Se puder, marque-a como correta.
    – Francisco
    Commented 11/02/2018 às 11:56

1 Resposta 1

1

Em react, você pode utilizar códigos javascript dentro das propriedades dos componentes utilizando as chaves ({}).

Isso é muito útil quando você precisa concatenar valores ou chamar funções.

Com isso, para concatenar o "habilidade-" com o habilidade.value na propriedade className, você pode fazer dessa forma:

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

Para tirar o valor de % você pode dar um replace na string, ficando assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .