Таким образом, вам нужен только один кусок состояния, чтобы выполнить это, и вы устанавливаете его в противоположность тому, что было ранее. Тогда приведенные ниже троичные компоненты будут отображать один компонент, если он истинный, и другой, если он ложный.
Редактировать - я думаю, это ближе к тому, что вы ищете:
import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';
const Buttons = () => {
const [showClaim, setShowClaim] = useState(false);
const handleCLick = () => {setShowClaim(!showClaim)}
return(
<div className="both-buttons">
{showClaim ? null : <SpinNowButton onClick{() => handleClick()}/>}
{showClaim ? <ClaimNowButton onClick{() => handleClick()}/> : null}
</div>
);
};
export default Buttons;