Using Formik with React and material-ui's TextField

Question

Is it possible to have a form with values that change as the component props change?

I have a parent component with two child components, As something changes in child 1 i want it to send updates to its sibling and update the form values. I'm using formik with React and material-ui. I am able to send the data to the sibling component, but I'm having an issue managing the state of the form. I set the initial values of the form to props.data['fieldName'] and that part is working.

But the material-ui text field is not set to dirty so the label is right on top of the value.

And as I try to update the value it doesn't let me change it.

I am fairly new to React and this seems like I just don't quite understand how it should be done in React, any help would be greatly appreciated.

Answer 1

if you are using TextField, you can do this workaround:

<TextField InputLabelProps={{ shrink: true }} />

Or you can do that:

<InputLabel shrink>Count</InputLabel>

Source: https://material-ui.com/components/text-fields/