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]);
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>
Source: stackoverflow.com
Related Query
- Disabled When Lacking Input in Field in React
- react input field will loose focus when filtering data
- React Unfocuses Input Field When Typing
- how to change label color when input field is focus in react js
- How to enable another input field when a user selects an option from dropdown in React
- Unable to type in an input field when adding item to cart in React
- rule validation not triggered on input field when value is changed from React state
- show input field when other option is selected from select box using ionic react
- Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]
- Value of React input field persists when clicking
- It takes ages to type into the styled M-UI TextFields when I call onChange collecting input field data in react
- Input field disappears when value length is 0 in React
- Ckeditor dialogs input field disabled when editor itself placed in modal
- I am using react js and jsx and trying to get a simple search input field to grow when clicked
- Why I cannot type continuously in react Input field when passing values to another component using props
- How to update the input field when other input field is edited using React useState
- React - Unwanted height change when rendering an input field
- How can I update a paragraph tag in REACT when an input field is changed?
- how to display "No Data Found" when user type wrong name in input field which is not in API in React
- Reset an input field when another one is written in React with react-hook-form
- React app crashed when trying to submit with empty input field
- Disable input field when click edit button using React Hooks
- How to keep "Add" button fixed at the top when clicked to add a new input from field in React JS
- React input field does now work when typing too fast
- How to disable the Text field name is disappearing when we moved out the input filed box in react js
- React input field not updating when props passed
- In React ES6, why does the input field lose focus after typing a character?
- Can't type in React input text field
- React prevent form submission when enter is pressed inside input
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
More Query from same tag
- React, variable speed Clock with setTimeout
- Marerial Table select menu is connected to each row?
- Maximum update depth exceeded (without onclick)
- ReactJs setState updating not in sync with what is being typed in the input box
- Refresh component after remove an object - ReactJS
- useEffect props callback function causing infinite loop
- javascript change background color on click
- Conditional svg Inline Style in ReactJs
- React doesn't display all of my array from state
- What is the best way to refresh a page?
- Why my renderTitles function does not render a list using map?
- Sharing Code between Multiple React Applications with Symlinks
- How to redirect to other page with parameters in react
- Type Error, cannot read property 'map' of undefined
- Adding events from api to React Calendar
- How do I set up WordPress and WooCommerce API so that I won't get CORS error when posting?
- Pass Values from JSON as Props to the child component
- Optimizing performance of a selectable list items with a closure
- Loop in array through objects with find()
- React HOC to handle clicks outside a given Component
- Gatsby createPages with single JSON file doesn't refresh data changes
- How to maintain previous changed state in REACT JS as when new item is updated, previous is set to default?
- How do I install a React app based on react-router's browserHistory into a WordPress page on Apache?
- Setting stockfish skill level (UCI / Javascript)
- Force Debounce to Finish?
- Manage onChange on input
- how can I change the layout of this material UI form?
- useState and useHooks in HTML
- How should I fix "Expected to return a value at the end of arrow function."?
- How can I make text flow around an icon in my React App?