score:1
Accepted answer
this should do the trick (or at least be a start):
import { useeffect, useref, usestate } from "react";
import reactdom from "react-dom";
const input = (props) => {
const [msg, setmsg] = usestate();
// the added part
const ref = useref();
useeffect(() => {
if (ref.current.validationmessage) setmsg(ref.current.validationmessage);
}, [ref]);
// the added part
return (
<div>
<input
ref={ref}
type="number"
min="1"
max="10"
defaultvalue={props.defaultvalue}
onchange={(event) => setmsg(event.target.validationmessage)}
></input>
<span>{msg}</span>
</div>
);
};
const app = () => {
return (
<div>
<label>type 0 below to see the error message</label>
<input defaultvalue="1" />
<label>should show error message straight away</label>
<input defaultvalue="100" />
</div>
);
};
reactdom.render(<app />, document.getelementbyid("root"));
remember that target
is basically a ref to your input.
Source: stackoverflow.com
Related Query
- How to get the initial validation message from Input in React?
- How to get validation error on input element in React if the input is of type="file"
- How can we get the input text from multiple dynamic textareas in react hook?
- React - How can I get the values from my multiple input and send them to my input?
- How to pass input from React Form to Axios get request and display the request result?
- React : how to get input value from one component to make the ajax call in another component?
- How to get the data from React Context Consumer outside the render
- How can I get a variable from the path in react router?
- How to get form data from input fields in React
- How to avoid the useState function parameter (to get initial values) from being executed on every render?
- How can I get the value from an animated or interpolated value in React Native?
- How does Express and React Routes work on initial GET request from browser?
- How to get the selected value from a radio button group in React where there are multiple groups?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How do I combine two arrays in react to get a new one with all of the items from the previous two?
- How should i get the value from custom attribute in react element?
- how to get a Component variable from another component but their both in the same file React
- React - How to get input from looped <form>?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How can i get access to the current user inside of react from firebase?
- how to take out the day name from the input date without using moment js in react
- Django Rest Framework and React Front End: How to prevent unauthorized users from viewing private images if they get a hold of the image URL?
- How to add Link from react router dom to the submit button with the default Submit validation
- How to take the input from a react component and pass the length of the input to another react component
- How to get the state updated of input field of google map api in React app
- How to use the GraphQL Get query from aws in React
- How do I get the actual file from an Input type file element?
- How can I get token from the URL in Nextjs / React App?
- How to get the value of selected option from React hooks?
More Query from same tag
- How to filter on ANTD table when the column is a JSON array instead of a string
- Semantic UI React Popup(s) Not Appearing
- React-Tooltip not displaying until page is refreshed
- which is correct way to use navigate dependency in useEffect
- Interrupt Enter Key On ContentEditable Div In ReactJS
- How can I show tooltip info for 4 seconds on page load and then hide, then after show on hover?
- React TypeScript/Firebase -Property '_tokenResponse' does not exist on type 'UserCredential'
- Redirect and refresh page on form submission in React frontend
- React - Displaying a loading spinner for a minimum duration
- state update from a callback
- What Type should be used on a React Component that returns a Boolean or JSX?
- PokeAPI - Fetching Pokemon Data
- Calculating average difference between date() entries in an array (in ms)
- material-ui client side warning: Prop `style` did not match
- can't get success response data/status from node/express to my client app(react): "referenceerror response is not defined"
- React loading screen using hooks
- How can i transfer the data from here to here
- Occupy content space based on the screen size in ReactJS
- useState in a createHigherOrderComponent
- Typescript error and I can't assign a function to a RefObject.current AND it says its not callable
- Console log output of element in a React app
- Accessing props in another component
- How to connect mySQL data base (on hosting which does not support Node.js) to React application (JS)?
- Javalin sessionAttribute() isn't Persisting Between Requests
- validateDOMNesting(...): <div> cannot appear as a descendant of <p>
- React Semantic UI Dropdown open on bottom
- withFormik : On initial value change, update props.value
- Delete item in React
- Youtube Data Api V3 using React js showing results of previous fetch
- How to set active link in Navbar using Nav.Link and React Router?