score:0
Accepted answer
i suggest to add state property called submitted
when it's true it allows the errors show and also watch the input values to fill the errors :
import react from 'react';
const untitled = () => {
const [name, setname] = react.usestate('');
const [email, setemail] = react.usestate('');
const [errors, seterrors] = react.usestate < any > {};
const [submitted, setsubmitted] = react.usestate(false);
function handlesubmit() {
setsubmitted(true);
}
react.useeffect(() => {
let newerrors = {};
if (name.trim() === '' && submitted) {
newerrors = { ...newerrors, name: 'name cannot be empty' };
} else if (name.trim().length < 3) {
newerrors = {
...newerrors,
name: 'name length cannot be less than 3 characters',
};
}
if (email.trim() === '' && submitted) {
newerrors = { ...newerrors, email: 'email cannot be empty' };
} else if (!/^([a-za-z0-9_.-])+@(([a-za-z0-9-])+\.)+([a-za-z0-9]{2,4})+$/.test(email)) {
newerrors = { ...newerrors, email: 'email is not valid' };
}
seterrors(newerrors);
}, [name, email, submitted]);
react.useeffect(() => {
if (!errors.name && !errors.email) {
setsubmitted(false);
}
}, [errors]);
return (
<div>
<input type="text" value={name} onchange={e => setname(e.target.value)} />
<input type="email" value={email} onchange={e => setemail(e.target.value)} />
<button
mode="contained"
style={{ borderradius: 0 }}
contentstyle={{ padding: 10 }}
uppercase={false}
onpress={handlesubmit}
>
daftar
</button>
{submitted && json.stringify(errors)}
</div>
);
};
export default untitled;
Source: stackoverflow.com
Related Query
- React Hooks how to call a function after setState finished linearly
- React.js - how do I call a setState function after another one has finished
- How to resolve a promise after react hooks setState complete?
- React redux hook useDispatch function how can I call something after it finish
- How to test a handle function call with a react functional component with hooks
- Calling function after setState React hooks
- How to change style property in react hooks on function call
- How to call a function onClick which is defined in React Hooks useEffect()?
- How to disable other buttons till the function call is complete after clicking on one in react render()?
- Why is my state beeing updated before i call setState with React Hooks and how do i fix the disabled mouse pointer?
- React: how to execute a function after setState in Parent has been finished
- React Hooks changing state of an array inside of asycn function after useEffect call
- How do I run a line of code after a function that contains setState when it is finished updating state?
- how to call function after async task react
- How to test a function call after state receive value inside expression in React function component using Jest
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- How to instantly display data after an API call in react hooks
- How to get response after a function call in React JS?
- How to call multiple function in react hooks
- How to call loading function with React useEffect only once
- Can I execute a function after setState is finished updating?
- How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
- Call function after dispatch from redux has finished
- How to call a function every minute in a React component?
- How to call multi setter useState react hooks
- How to get the changed state after an async action, using React functional hooks
- how and when to call a react component methods after state change from redux
- React 16: Call children's function from parent when using hooks and functional component
- React - How do you call a function from inside another function
- How to call a component function on other component, but from the other component ? React
More Query from same tag
- State in useEffect is not updating
- in next.js, Error: Objects are not valid as a React child (found: object with keys {})
- Get unique category property values from an array
- How to create a new array based on number provided by make the number segregate in a range in reactjs
- componentDidMount not getting props value
- How can I add styling to an element in React?
- Search functionality no longer working after converting from React class to function component
- TypeError: Cannot read property 'getFullYear' of undefined (REACT)
- How to iterate through an array inside an array.map function?
- How to increment counter value for each dropdown selection
- What are the differences between plain es6 class and extend React.Component
- React Router Parameter Under Subpath
- update item with axios on click in reactjs
- Inconsistency in 'useState()' working on React.JS
- Mobx Inject, Observer and HoC together
- Jest fails with 'self is not defined' when importing react-diagrams
- Getting an error stating that my state is undefined
- Redux Dev Tools not working for large action payload
- React Flux - wait for props before rendering child components
- good way to change React JS state
- failes to open modal component from another component
- React filtering with checkboxes
- Cound not find icon react-fontawesome
- How to use Apollo Client + React Router to implement private routes and redirection based on user status?
- No overload matches this call
- load function on react
- Reactjs - Demo Application is not working
- Need to create a common function for axios .then and catch
- Down carat doesn't render within Office UI Fabric React's drop down component
- Only able to get the answerID of oldest post instead of post that is clicked