React app - How to show the price when the button is clicked? - reactjs

Question

I am just learning React and I have a problem. I want the price (cena) to appear only when the "Oblicz" button is clicked.
This is the component that shows the price.
function CalculatorPrice(props) {
const currentPrice = props.price;
return (
<div className='calculator__price'>
<CalculatorBtn />
<div className='calculator__price__box'>
<h3 className='calculator__price__title'>Cena</h3>
<p className='calculator__price__text'>{isNaN(currentPrice) ? <span></span> : <span>{currentPrice}</span>} zł</p>
</div>
</div>
);
}
This is the button component.
function CalculatorBtn() {
return (
<div>
<button className='calculateBtn'>Oblicz</button>
</div>
);
}

Answer 1

You can achieve that by passing state and a function to change that state to your button component which tracks when to show the price:
function CalculatorPrice(props) {
const currentPrice = props.price;
const [showPrice, setShowPrice] = useState(false);
const handleClick = () => {
setShowPrice(true);
}
return (
<div className='calculator__price'>
<CalculatorBtn showPrice={showPrice} handleClick={handleClick} />
<div className='calculator__price__box'>
<h3 className='calculator__price__title'>Cena</h3>
<p className='calculator__price__text'>
<span>{((isNaN(currentPrice) || !showPrice) ? '' : currentPrice) + zł}</span>
</p>
</div>
</div>
);
}
Button:
function CalculatorBtn(props) {
const handleClick = props.handleClick;
return (
<div>
<button className='calculateBtn' onClick={handleClick}>Oblicz</button>
</div>
);
}
You will need to add another way/button to reset your price (if you need to)