-1

olá estou com um problema: Tenho o componente botao

const Botao = (props) => {
    const classe = "Botao"
    const classes = [props.active,classe].join(' ')

return (
    <button 
        onClick={props.click} 
        className={classes}>
            {props.titulo}
    </button>
)

Quero que ele mude recebendo a classe que é passda por props.classe. Isso acontece no componente botoes:

state={
    active:null,
}

activateButton = () => {
    if (this.state.active) {
        console.log("true")
        this.setState({active:null})
    }else{
        console.log("false")
        this.setState({active:"Active"})
    }
}

render(){
    return (
        <div>
            <Botao  
                titulo="Saida 1" 
                active={this.state.active} 
                click={this.activateButton}/>
            <Botao  
                titulo="Saida 2" 
                active={this.state.active} 
                click={this.activateButton}/>
        </div>
    )
}

quando clico em um botão, queria que somente ele recebesse a classe Active que o torna diferente, porem não sei como passar a propriedade somente para o botao que estou clicando. Alguem pode me ajudar?

1 Resposta 1

-1

Você poderia colocar a método activateButton dentro da componente Botao e chama-lá da componente Botoes (link Referência 1 para isso abaixo). E o estado que deve ser mudado é o de Botao, e não Botoes, certo? Sendo assim, dentro da função que está dentro da componente Botao você coloca um setState lá e muda :) Assim ele vai renderizar tudo corretamente.

Referência 1

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 .