change default value in input tag

Question

I am using react-form to create an input form. I am using the tag. I want to pre-populate the input field, but I want the user to still be able to change the default value that is entered. React is the front end language that I am using. I tried setting the readOnly field inside the input tag to false. It allows me to click on the field but I still cant backspace the default day and change it to something else.

When I use a placeholder, instead of having the input tag at all, there is an overlap problem (check the image attached). once you enter in a value, there is no problem as the "Due Date" moves up higher with the existing functionality.

I would need the placeholder to only show up when I click on the "Due Date" field to enter a value, or be able to alter the default value when using the input tag. I am using react version 16.2.0enter image description here

              <Field
                name="dueDayOfFilingPeriod"
                component={TextField}
                floatingLabelText="Due Date"
                floatingLabelStyle={(props.hasFilingFormName || props.hasPreference) ? {} : styles.floatingLabelStyle}
                floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
                disabled={props.hasFilingFormName}
                style={styles.inline}
              >
                <input value= {props.filingInfo.dueDate}/>
              </Field>

Answer 1

You can set a defaultValue prop instead of a value prop on the <input />. This pattern is usually called an uncontrolled component since you only set the starting value, you can read more here: https://reactjs.org/docs/uncontrolled-components.html

To make it a controlled component, where the value is always being set relative to the state of your component, you need to add an onChange handler to the <input /> component and update the state with the new value. You can read more on controlled components here: https://reactjs.org/docs/forms.html