I want to call two const in the same onclick

How can I call two consts in the same onclick event? One is to open a popup form and the other is to make an emoji explosion effect every time I click the button.

This is the code when the button is clicked it shows the popup form, but the emoji explosion does not appear.

const CTA = () => {
  const [buttonPopup, setButtonPopup] = useState(false)

  const explosion = (posX, posY) => emojisplosion({
    emojis: ["🌌", "✨", "⭐", "💫", "🚀", "🌎", "🌑"],
    physics: {
      gravity: -0.20,
      initialVelocities: {
        rotation: {
          max: 24,
          min: -20
        },
        rotationDecelaration: 2.01,
        y: {
          max: 17,
          min: 14.7,
        },
        x: {
          max: 4,
          min: 1.3,
        },
      },
    },
    position: () => ({
      x: posX,
      y: posY
    }),
  });
  const blast = event => {
    explosion(event.clientX, event.clientY)
  }

  
  return (
    <div className="vimcash__cta">
      <div className="vimcash__cta-content">
        <p>Comienza con nosotros</p>
        <h3>Comunicate hoy mismo y empezemos a explorar posiblidades infintas.</h3>
      </div>
      <div className="vimcash__cta-btn">
        <button type="button" onClick={() => {setButtonPopup(true); blast();}}>Contactar</button>
      </div>
        <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
          <h3>Popup formulario de contacto</h3>
          <p>trigger popup form contacto</p>
        </Popup>
    </div>
  )
}

>Solution :

try to combine them as below:

const allFunc = (e) => {
    explosion(e.clientX, e.clientY)
    setButtonPopup(true)
}

<button onClick={allFunc}>Contactar</button>

Leave a Reply