React Admin - Get current value in a form

Question

I am having big troubles getting the "updated" value of a record in an edit form. I always get the initial record values, even though I have an input linked to the right record source, which should update it.

Is there an alternative way to get the values of the SimpleForm ?

I have a simple edit form :

<Edit {...props}>
    <SimpleForm>
        <MyEditForm {...props} />
    </SimpleForm>
</Edit>

MyEditForm is as follow:

class MyEditForm extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {    
        console.log(prevProps.record.surface, this.props.record.surface); // <-- here is my problem, both values always get the initial value I had when I fetched the resource from API
    }

    render() {
        return (
            <div>
                <TextInput source="surface" />
                <!-- other fields -->
            </div>
         );
    }
}

I usually do it this way to get my updated component's data from other components, but in the very case of a react-admin form, I can't get it to work.

Thanks,

Nicolas

Answer 1

It really depends on what you want to do with those values. If you want to hide/show/modify inputs based on the value of another input, the FormDataConsumer is the preferred method:

For example:

import { FormDataConsumer } from 'react-admin';

const OrderEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <SelectInput source="country" choices={countries} />
            <FormDataConsumer>
                {({ formData, ...rest }) =>
                     <SelectInput 
                         source="city"
                         choices={getCitiesFor(formData.country)}
                         {...rest}
                     />
                }
            </FormDataConsumer>
        </SimpleForm>
    </Edit>
); 

You can find more examples in the Input documentation. Take a look at the Linking Two Inputs and Hiding Inputs Based On Other Inputs.

However, if you want to use the form values in methods of your MyEditForm component, you should use the reduxForm selectors. This is safer as it will work even if we change the key where the reduxForm state is in our store.

import { connect } from 'react-redux';
import { getFormValues } from 'redux-form';

const mapStateToProps = state => ({
    recordLiveValues: getFormValues('record-form')(state)
});

export default connect(mapStateToProps)(MyForm);

Answer 2

I found a working solution :

import { connect } from 'react-redux';

const mapStateToProps = state => ({
    recordLiveValues: state.form['record-form'].values
});

export default connect(mapStateToProps)(MyForm);

When mapping the form state to my component's properties, I'm able to find my values using :

recordLiveValues.surface