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>
)
}try to combine them as below:
const allFunc = (e) => {
explosion(e.clientX, e.clientY)
setButtonPopup(true)
}
<button onClick={allFunc}>Contactar</button>
You can try using the && operator or you can addy curly brackets and then call the functions.
Like this:
<button onClick={(e) => {
// call your functions here
explosion(e.clientX, e.clientY);
setButtonPopup(true);
}}>Contactar</button>
Or this with the && operator
<button onClick={func1() && func2()}>Contactar</button>