how to make checks to be asure that you can not have multiple " ." and zeroes to start your number

[momin-sana]

I am making a calcultor using React Hooks. I wan to apply a condition in my code to check and be sure that you can not have multiple "." in your number and that you do not have series of zeroes to start your number.

how can I do that?

I tried below code to apply this condition but having an error [object object]

this is my contextprovider.js code

import React, { useState } from "react";
     export const NumberContext = React.createContext();

        const ContextProvider = (props) => {
          const [number, setNumber] = useState("");
          const handleCompValue =(num)=>{
            try {
              if (!number.includes('.') || num !== '.') {
              setNumber(`${(number + num).replace('[/^0+/]', '')}`);
            }
            } catch (error) {
              num.preventDefault();
              setNumber("")
            }

          }
          console.log("handleCompValue", handleCompValue);
          console.log("number",number);
          return (
            <NumberContext.Provider value={{ 
              handleCompValue,
              number }}>
              {props.children}
            </NumberContext.Provider>
          );
        };
        export { ContextProvider };

my Keypad.js code, from where i need to get the value.

import React, {useContext, useState } from "react";
import { NumberContext} from "../../ContextProvider";
import "./keypad.css";

export default function Keypad(keyValue) {
const {handleCompValue}= useContext(NumberContext);
console.log("handleCompValue", handleCompValue);

  return (
    <div className="c-grid">
      <button
        type="button"
        className="top-btn span-two"
        keyValue="ac"
        onClick={()=> handleCompValue(keyValue)}
      >
        ac{" "}
      </button>{" "}

      <button
        type="button"
        className="top-btn "
        keyValue="%"
        onClick={()=> handleCompValue(keyValue)}
      >
        %
      </button>{" "}

      <button
        type="button"
        className="top-btn special "
        keyValue="/"
        onClick={()=> handleCompValue(keyValue)}
      >
        /
      </button>{" "}

      <button
        className="normal"
        keyValue={7}
        onClick={()=> handleCompValue(keyValue)}
      >
        7{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={8}
         onClick={()=> handleCompValue(keyValue)}
      >
        8{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={9}
         onClick={()=> handleCompValue(keyValue)}
      >
        9{" "}
      </button>{" "}

      <button
        className="special"
        keyValue="*"
        onClick={()=> handleCompValue(keyValue)}
      >
        x{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={4}
        onClick={()=> handleCompValue(keyValue)}
      >
        4{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={5}
         onClick={()=> handleCompValue(keyValue)}
      >
        5{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={6}
         onClick={()=> handleCompValue(keyValue)}
      >
        6{" "}
      </button>{" "}

      <button
        className="special"
        keyValue="-"
        onClick={()=> handleCompValue(keyValue)}
      >
        -
      </button>{" "}

      <button
        className="normal"
        keyValue={1}
         onClick={()=> handleCompValue(keyValue)}
      >
        1{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={2}
        onClick={()=> handleCompValue(keyValue)}
      >
        2{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue={3}
        onClick={()=> handleCompValue(keyValue)}
      >
        3{" "}
      </button>{" "}

      <button
        className="special"
        keyValue="+"
        onClick={()=> handleCompValue(keyValue)}
      >
        +
      </button>{" "}

      <button
        className="span-two normal"
        keyValue={0}
        onClick={()=> handleCompValue(keyValue)}
      >
        0{" "}
      </button>{" "}

      <button
        className="normal"
        keyValue="."
        onClick={()=> handleCompValue(keyValue)}
      >
        .{" "}
      </button>{" "}

      <button
        className="special"
        keyValue="="
        onClick={()=> handleCompValue(keyValue)}
      >
        ={" "}
      </button>
    </div>
  );
}

computation.js file, where value will be displayed.

import React, { useContext} from "react";
import { NumberContext } from "../../ContextProvider";
import "./computationscreen.css";

export default function ComputationScreen() {
    const {number} = useContext(NumberContext);

console.log("number",number);
  return (

    <div className="ctc c-compute">
      {" "}
    <span> {number} </span>{" "}

      {" "}
    </div>
  );
}``

[poljsakerik]

@momin-sana I would like to help