Question 209514 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – why does the input field state is not changing while typing in textField MUI

In my react.js component, when i am trying to start type anything in textField, it is not updating .

I tried with debugger the i found — when first character entered, component re-renderd so looses its prevous states and looks like textField value is not updating.

It was working fine earlier when i was using mui Box instead of Grid, but now removing Grid also is not working .
Same question asked by many people, i went through their provided solution but no luck.

Here is my code :

const Registration = (props: any) => {       

            const [loading, setLoading] = useState(false);
            const [successAlert, setSuccessAlert]=useState(false)
            const [formData, setFormData] = useState({
            firstName:'',
            })
           const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
               event.preventDefault();
               submitRegister()
             };
           
            const submitRegister = async()=>{
             setLoading(true)
             axios.post('example.com/create/user',formData)
             .then(response =>{
               console.log(response.data.code)
               if(response.data.code ===200){
                 setSuccessAlert(true)
                 setLoading(false)
               }
             })
             .catch(error =>{
               console.log(error)
           
             })
           
            }  

            const handleChangeForm=(e:ChangeEvent<HTMLInputElement>)=>{
             const{name ,value }= e.target;
             setFormData((prevFormData)=>({
               ...prevFormData,
               [name]:value
             }));
           };

           const FormContainer = styled("form")(({ theme }) => ({
            maxWidth: 700,
            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
              maxWidth: 300
            },
            [theme.breakpoints.up(theme.breakpoints.values.md)]: {
              maxWidth: 650
            }
          }));

          const StyledTextField = styled(TextField)(() => ({
            "& .MuiFormLabel-asterisk": {
              color: "red"
            },
            '& label.Mui-focused': {
              color: '#96A8AE', //Dark Grey as per SCM
          },
          '& .MuiOutlinedInput-root': {
              '&.Mui-focused fieldset': {
                  borderColor: '#96A8AE',
              },
          },
          
          }));
               
               return (
                       <Grid container className="registration__container" spacing={2}>
                           <Grid item xs={7} md={7} lg={7} xl={7}>
                             <Grid className='left'>
                               
                               // some code here
                             </Grid>
                             {loading &&<Loader /> }
                           </Grid>
                           <Grid item xs={5} md={5} lg={5} xl={5} className='registration__form' key="regis-form">
                               
                               <FormContainer onSubmit={handleSubmit}>
                                   <Grid item container className='details__form' columnSpacing={{ xs: 2, sm: 2, md: 2 }}>
                                       <Grid item xs={6} md={6} lg={6} xl={6}>
                                           <StyledTextField
                                               label="First Name"
                                               name="firstname"
                                               value={formData.firstName}
                                               onChange={handleChangeForm}
                                               key="firstName"                                    
                                               size='medium'
                                               required
                                               fullWidth
                                             />
                                       </Grid>
                                     </Grid>
               
                                   
                                   <Grid item xs={12} className="submitbtn__wrapper">
                                         <button type="submit">Register</button>
                                   </Grid>
               
                                 </FormContainer>
                           </Grid>
                     </Grid>
                 );
       };
       
       export default Registration;

I also Tried-
React.js – input losing focus when rerendering

React Hooks – Input loses focus when 1 character is typed in

In React ES6, why does the input field lose focus after typing a character?
and other similar question , but did not help me.

Tags:

2

Answers


  1. 0

    I think you are passing name prop in TextField incorrectly.

    For example:

    <StyledTextField
  label="First Name"
  name="firstName"   // this line (you are using "firstname")
  value="{formData.firstName}"
  onChange="{handleChangeForm}"
  key="firstName"
  size="medium"
  required
  fullWidth
/>

    And in your code, you need to move StyledTextField and FormContainer outside of the component to avoid causing unnecessary re-rendering.

    For example:

    const FormContainer = styled("form")(({ theme }) => ({
  /* ... */
}));

const StyledTextField = styled(TextField)(() => ({
  /* ... */
}));

const Registration = (props: any) => {
  /* ... */
};

export default Registration;
    Login or Signup to reply.
  2. 0

    There are 2 problems here:

    First, you are recreating your styled components FormContainer and StyledTextField on each render, causing them to lose focus on each rerender. This can be fixed by moving both of them outside of the Registration component.

    Second, you have a typo you have in the name property of your StyledTextField. Try firstName (with capital "N") instead.

    In JavaScript, identifiers are case sensitive. That means that firstName and firstname will be different properties. Here, you are setting the firstname property of your formData state, but the value shown by the StyledTextField is firstName, which does not get updated by your change handler.

    Here’s a working example: https://stackblitz.com/edit/stackblitz-starters-tx9w4d?file=src%2FRegistration.tsx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search