identify button when clicking

Question

hello I have a problem: I have the boot component

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

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

I want it to change by receiving the class that is passed by props.classe. This happens in the buttons component:

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

When I click on a button, I wanted only it to receive the Active class that makes it different, but I don’t know how to pass the property only to the button I’m clicking. Someone can help me?

Answer 1

You could put the method activateButton inside the Boot component and call it the component Botoes (Reference 1 link to this below). And the state that should be changed is that of Botao, and not Botoes, right? Therefore, within the function that is within the component Botao you put a setState there and change :) so it will render everything correctly.

Reference 1