Checkboxes

A checkbox isn't text: it's ticked or it isn't. So its state is a boolean, true or false, and instead of value, it's controlled with checked:

import { useState } from "react";

export default function App() {
    const [parking, setParking] = useState(false);
    const parkingPrice = parking ? 15 : 0;

    return (
        <main>
            <div className="check">
                <input
                    id="parking"
                    type="checkbox"
                    checked={parking}
                    onChange={(event) => setParking(event.target.checked)}
                />
                <label htmlFor="parking">I'm coming by car</label>
            </div>
            {parking && <p>Your parking lot: P2</p>}
            <p>Parking: €{parkingPrice}</p>
        </main>
    );
}

event.target.checked is true when the click has just ticked the box, and false when it has unticked it. Don't use event.target.value here: the value of a checkbox is the text "on", ticked or not.

A boolean in state goes well with what you know from the Lists and Conditions lesson. A part of the page that's there only while the box is ticked uses &&, and a value that depends on the box uses ? :. In the example, the parking lot shows only for those who come by car, and the price of parking is 15 or 0. Both are worked out from parking in every render, so they change with each click on the box.