Another Page

demo.js
let a = 1;
 
console.log(a);

Component

import { useState } from 'react';
import styles from '../../components/counters.module.css'
 
export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)} className={styles.counter}>Clicked {count} times</button>
    </div>
  );
};

External Component

import { useState } from 'react';
import styles from './counters.module.css';
 
function MyButton() {
  const [count, setCount] = useState(0)
 
  const handleClick = (action) => {
    action === 'increment' ? setCount(count + 1) : count > 0 && setCount(count - 1);
  }
 
  return (
    <div>
      <button onClick={() => handleClick('increment')} className={styles.counter}>
         +
      </button>
      <button onClick={() => handleClick('decrement')} className={styles.counter}>
         -
      </button>
      <div className={styles.count}>{count}</div>
    </div>
  )
}
0