generate.js

import React, { useState, useEffect } from "react";
import GenerateCounter from "../components/GenerateCounter";

import { generateArticle } from "../services/ArticleService";

const Generate = () => {

    const [count, setCount] = useState(1);
    
    const updateCount = new_count => {
        setCount(new_count);
    };

    return (
      <>
        <div className="my-10">
          <GenerateCounter count={count} updateCount={updateCount}></GenerateCounter>
        </div>
      </>
    );
};

export default Generate;

GenerateCounter.js

import React, { useState, useEffect } from "react";

const GenerateCounter = ({ count, updateCount, ...restProps }) => {

  const handleClick = (e) => {
    let new_count = count + 1;
    updateCount(new_count);
  };

  return (
    <>
      <button
          onClick={(e) => handleCounterClick(e)}
          type="button"
          className="text-3xl border p-4"
        >
          Plus
        </button>
    </>
  );
};

export default GenerateCounter;