score:0

Accepted answer

to do that, you would instead get disabled state from your child:

  • adding a new state to your parent component:
const [disabled, setdisabled] = usestate(true);
  • pass it down to your child component:
<inputcode
        length={6}
        label="code label"
        loading={loading}
        oncomplete={(code) => {
          setloading(true);
          settimeout(() => setloading(false), 10000);
        }}
        setdisabled={setdisabled}
/>
  • set the status of your button base on that state:
<button disabled={disabled}>submit</button>
  • import setdisabled ot your child component and add useeffect like this:
  useeffect(() => {
    if (code.some((num) => num === "")) {
      setdisabled(true);
    } else {
      setdisabled(false);
    }
  }, [code, setdisabled]);

working example

score:0

you need to add new method to check whether the inputs are filled or not like you have for oncomplete

inputcode.js

import react, { usestate, useref, useeffect } from "react"; //add useeffect to watch code values
const inputcode = ({ length, label, loading, oncomplete, onincomplete }) //onincomplete

add watcher to code and execute onincomplete until the values of inputs are equal to length given to component

useeffect(() => {
  const values = code.filter((item) => {
    return item !== "";
   });
   if (values.length !== length) {
     onincomplete(true);
   }
}, [code]);

in index.js

<inputcode
  length={6}
  label="code label"
  loading={loading}
  oncomplete={(code) => {
    setcodes(code);
    setloading(true);
    settimeout(() => setloading(false), 1000);
  }}
  onincomplete={() => setcodes(false)} //add this props to check validation
  />

and you can simply disable button based on code state

<button disabled={!codes}>submit</button>

Related Query

More Query from same tag