redux-form warning Cannot update a component from inside the function body of a different component

user_7384621 0
Viewed 3936

I am getting this issue with react form. After entering or deleting values from input field I get a red warning in the console. If I comment out the validate prop everything works fine.

Warning: Cannot update a component from inside the function body of a different component.

import { Field, reduxForm } from 'redux-form';

const required = value => (value ? undefined : 'Required field')

const renderField = ({
    input,
    label,
    type,
    meta: { touched, error, warning }
}) => (
        <div>
            <label>{label}</label>
            <div>
                <input {...input} placeholder={label} type={type} />
                {touched &&
                    ((error && <span>{error}</span>) ||
                        (warning && <span>{warning}</span>))}
            </div>
        </div>
    )

function LoginForm(props) {
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit} >
            {console.log("LOGIN FORM PROPS", props)}
            <Field
                label="Username"
                name="username"
                component={renderField}
                type="text"
                placeholder="username"
                validate={[required]}
            />
            <Field
                label="Password"
                name="password"
                component={renderField}
                type="password"
                placeholder="password"
                validate={[required]}
            />
            <button type='submit'>Submit</button>
        </form>
    )
}

export default reduxForm({
    form: 'loginForm'
})(LoginForm)
redux-form reactjs
1 Answers

Update react and react-dom version 16.13.1, it's removed the warning
more detail find here -> https://github.com/redux-form/redux-form/issues/4619

after updating the react and react-dom version if the warning is still there then there is a two case

Case 1
its becuse of react-hot-loader. so, replace react-hot-loader with @pmmmwh/react-refresh-webpack-plugin in webpack.config.js

Case 2
It's because of @hot-loader/react-dom, @hot-loader/react-dom is still on version 16.13.0, it's not compatible with react@16.13.1, so, replace @hot-loader/react-dom alias in webpack.config.js like below example

webpack.config.js

//replace @hot-loader/react-dom with react-dom only
...
resolve: {
    alias: {
      'react-dom': 'react-dom', 
    },
  }
...
user_113868020
Related