Necesito una pequeña ayuda con respecto al componente personalizado llamado SectionButton que actúa como botón y realiza la operación al hacer clic en el botón. Siempre que por primera vez intenté hacer clic en el botón, no funcionó, pero por segunda vez funcionó correctamente y no entiendo por qué no funcionó.

 import React, {Component} from 'react'; import './section-button.scss'; class SectionButton extends Component { constructor(props) { super(props); } render() { let classButton = "section-button"; this.props.type == "form" ? classButton += " form" : ""; this.props.type == "done" ? classButton += " done" : ""; this.props.active == true ? classButton += " active" : ""; return ( <div className={classButton} onClick={() => this.props.select(this.props.typeMethod || "")}> <span>{this.props.title}</span> </div> ); } } export default SectionButton;

Donde está el método de tipo

 <SectionButton title="Use a Card" type="form" active={this.state.methodPay == "card" ? true : false} typeMethod={"card"} select={this.changeMethodPay}/>

Pero cuando hago clic en otro botón sin la etiqueta typemethod, no funcionará por primera vez.

Aquí está ese botón:

 <div className="button-form" onClick={this.state.activeContinue ? this.state.paymentmethod === "Enter New Method" ? this.goToPay : this.confirmationPay : ()=>{}}> <SectionButton title={this.state.paymentmethod !== "Enter New Method" ? "REVIEW PAYMENT" : "NEXT"} type="form" active={this.state.activeContinue}/> </div>

El error que obtuvimos al inspeccionar