React: how to make buttons to increment and decrement a counter?-CodePudding

Its my first try at react, and I'm trying to make a ticket counter. It should increase and decrease by 1 depending on the arrow image chosen. So far, absolutely nothing is showing on my webpage. Can't figure out what I'm doing wrong?

import React, { useState } from "react";

function TicketCounter() {

    const counter = () => {
        const [counter, setCounter] = useState(0);
    
        const incrementCounter = () => {
            setCounter(counter   1);
        };
    
        const decrementCounter = () => {
            if (counter !== 0) {
                setCounter(counter - 1);
            }
        };
    };
    
    return (
        <div className="ticket-options">
            <div className="option-adult">
                <p>Adult Tickets (16 )</p>
                <div className="ticket-amount">
                    <button
                        className="arrow-up"
                        onClick={incrementCounter}>
                        <img src="images/arrowup.png" alt="arrow pointing upwards"/>
                    </button>
                    <span className="number">
                        textContent = {counter}
                    </span>
                    <button
                        className="arrow-down"
                        onClick={decrementCounter}>
                        <img src="images/arrowdown" alt="arrow pointing downwards"/>
                    </button>
                </div>
            </div>
    
            <div className="option-minor"> 
                <p>Minor Tickets (15-)</p>
                <div className="ticket-amount">
                    <img 
                        src={'../images/arrow.png'} 
                        alt="arrow up"
                        className="arrow-up"
                        onClick={incrementCount}
                    />
                    <span className="number">
                        textContent = {counter}
                    </span>
                    <img 
                        src={'../images/arrow.png'} 
                        alt="arrow down"
                        className="arrow-down"
                        onClick={decrementCount}
                    />
                </div>
            </div>
        </div>
    )
}

ReactDOM.render(<TicketCounter />, document.querySelector(".react-insert"));

my html includes <div ><div>and <script src="/scripts/tickets.js" type="text/babel"></script> at the end of the body with this in the head

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

CodePudding user response：

Your states and functions wrapped inside the counter function. You should remove that function

const [counter, setCounter] = useState(0);
        
 const incrementCounter = () => {
   setCounter(counter   1);
 };
        
 const decrementCounter = () => {
  if (counter !== 0) {
      setCounter(counter - 1);
   }
 };

And in onClick of the images you have typo, instead of incrementCounter and decrementCounter, you put incrementCount and decrementCount

Here is the working version https://codesandbox.io/embed/elated-wiles-9j9bbr?fontsize=14&hidenavigation=1&theme=dark