score:2
your textfield
is currently uncontrolled because it doesn't have a value
property. that means when you change number
, it has no effect on the textfield
, because the textfield
's content isn't controlled by your code. to make it controlled, add value={number}
to it. then, clearinfo
works correctly:
const { usestate } = react;
const { textfield } = materialui;
const example = () => {
const [number, setnumber] = usestate("");
const handlenumber = (evt) => {
const num = evt.target.validity.valid ? evt.target.value : number;
setnumber(num);
};
const clearinfo = () => {
//other fields here
// setfirstname("");
// setlastname("");
setnumber("");
};
const handlesubmit = (e) => {
e.preventdefault();
try {
//codes here
// updatedata();
clearinfo();
} catch (err) {
console.log(err);
}
// setopen(true); //for the alert
};
return <form onsubmit={handlesubmit}>
<textfield
type="number"
pattern="[0-9]*"
variant="outlined"
label="phone number"
fullwidth
onchange={handlenumber}
value={number}
required
inputprops={{
maxlength: 11,
}}
inputprops={{
disableunderline: "true", // *** changed case and value per error from react
}}
/>
<button>submit</button>
</form>;
};
reactdom.render(<example />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@5.5.0/umd/material-ui.development.js"></script>
i had to make two other changes there (other than commenting out missing functions, etc.) for the snippet to work without errors:
i removed the
async
fromhandlenumber
because it didn't have anyawait
in it and unfortunately stack snippets using jsx don't supportasync
/await
(because they use a really old version of babel; please vote to fix that here).react logged a warning about
disableunderline: true
ininputprops
saying (in effect) to make itdisableunderline: "true"
instead, so i did that.
Source: stackoverflow.com
Related Query
- The number is not clearing up after submission even if other fields do clear up
- Attribute "aria-current='page'" with class='active' not disappearing from first NavLink even after clicking the other links
- React: Setinterval is not stopping even after clearing the timer using clearInterval
- Formik input value for a number becomes a string even after it passes the Formik validation as a number
- Why my state is not getting updated even after writing the setState method?
- In React useEffect does not update after the value has changed from other component
- while building infinite loading via API in REACT , the page number is not updating in console even when i scroll down a lot
- Reactjs Form Validations-for input type number the text field in constantly showing single value even after giving backspace from the keyboard
- React hooks form doesn't reset the text fields even after submitting the data
- react state maps not showing data even after updating the states - react js
- my form is not working. when i click on save button, my table is blank, without the field input.and my cancel button is not clearing the fields
- Image upload not happening on the server while other fields going to backend in ReactRedux app
- React not re-rendering component after page refresh, even if the state changes
- Animation will not run even after adding animation class to the element via addEventListener in React
- Bootstrap 5 dropdown button is not working even after adding all the necessary scripts in index.html
- My component function is not re-rendering after state change even that I matched the state, returned new state and connected the component,
- After submitting the form the react-select dropdown not clear it's value
- Webpack-dev-server not bundling even after showing bundle valid message
- React Hooks - useEffect fires even though the state did not change
- React router not working after building the app
- DefaultValues of react-hook-form is not setting the values to the Input fields in React JS
- React Intl FormattedNumber with the currency symbol before, not after
- React - Form submission canceled because the form is not connected
- React-hook-form's 'reset' is working properly, input fields are still not emptying after submit
- How to clear the autocomplete's input in Material-ui after an onChange?
- redux-form fields not rerendering/updating after form loads
- React does not refresh after an update on the state (an array of objects)
- Load third party iframe in React after page load, so that the iframe does not affect PageSpeed score
- React Ref's offsetheight, always returns '0' for jest test case even after the content is loaded
- Why is clearTimeout not clearing the timeout in this react component?
More Query from same tag
- How to send requests to a nodejs backend from a React app served by nginx with ssl configured
- Why component update lifecycle executes whenever parent's state changes?
- How to count number of element in array data in Firestore?
- Need a clearer explanation how to avoid infinite re-rendering with React hooks
- execute child_process in a electron + react application
- React Enzyme find second (or nth) node
- Apply changes according to div id
- Render a React component based on its name
- How to know array contents are empty
- Render unique initials in a list
- Admin On Rest: Admin component should re-render when a correct login occurs
- Where is the variable named "global" coming from
- JSX if statement in template literal
- React.js: how to make inline styles automatically update progress bar on state change
- Dynamically sorting an array of objects in a dropdown list
- Unhandled Runtime Error - TypeError: Cannot read property 'length' of undefined (Nextjs)
- useEffect is running when any function is running
- Retrieving geolocation with React Native
- Error: Collecting page data for /dashboard/widget is still timing out after 2 attempts nextjs
- Can't upload multiple files by using Multer on React
- How do you do a "day" picker in Ant Design?
- How do you make React wait for ALL multimedia to be fully loaded?
- Redux Toolkit: lifecycle action types doesn't sync up when dispatching multiple async thunk actions in one thunk
- Multiple images have uploaded but not showing in UI (React Js)
- How can I get child function data inside parent data?
- Using Browserify with a revision manifest in Gulp, getting "Error: write after end"
- what is the best event to use to update react store
- ReactJS Axios Image Request
- Firebase - onAuthStateChanged 2 second delay. Add loading text/spinner
- componentWillReceiveProps not firing