Input is changing a uncontrolled input of type text to be controlled about formsy-react-components HOT 16 CLOSED

All of the form elements within formsy-react-components are controlled components, maybe you are switching them to an uncontrolled components by using undefined or null as values?

See:

• http://facebook.github.io/react/tips/controlled-input-null-value.html
• christianalfoni/formsy-react#332

from formsy-react-components.

To clarify: if you initially pass undefined or null as the value prop, the component starts life as an "uncontrolled" component. Once you interact with the component, we set a value and react changes it to a "controlled" component, and issues the warning.

The dev branch (alpha quality) has better proptype checking, so we should get earlier warnings about this in the future.

from formsy-react-components.

Aha! I see now in the playground source that value="" is passed to <Input /> :)

from formsy-react-components.

I had this warning message coming up for me when initialValues were empty and format returned undefined; the fix was to have format return '' by default

from formsy-react-components.

In case it helps anyone, I just had the issue and solved it by changing value={this.state.location} to value={this.state.location || ''} (this.state.location can be empty).

from formsy-react-components.

This is an utterly obscure and nonsensical error, it really doesn't help with most solutions. Im using Material UI for react and I'm using reject / accept buttons to close a dialog ( using redux to update the state accordingly) I have this warning, and I cannot get rid of it. Perhaps a better explanation of this controlled warning instead of more cryptic solutions?

from formsy-react-components.

Hi @stevematdavies — it is React that is raising this warning, we don't have any control over the wording. If you follow the advice set out above, it is avoidable. That said, I will add a note to the docs that we are dealing with controlled components, and that you shouldn't set a null or undefined initial state.

It's not clear to me how you're using formsy-react-components in your project. If you can't get to the bottom of this problem, report back with more detail or a code example and we'll try to help.

from formsy-react-components.

I still have this error now in React 16, and I cannot get rid of it. I am using MaterialUI and I am adding text box values if the user has chosen to save them in browserStorage (a remember me functionality). If the user has not selected they are initially undefined, (setting an empty string prevents the input boxes from being used at all.)

Here is a snippet from the Login (Im also using redux) ,props.credentials is gotten from localStorage, and mappedTo Props via redux-connect

render() {

 const { email, password } = (this.props.remember && this.props.credentials)
                                        ? this.props.credentials 
                                        : { email: undefined, password: undefined };

  return (
.....
<TextField
    floatingLabelText="Password"
    name="password"
    type="password"
    value={password} // I'm assuming here is the issue (its either populated or undefined)
    onBlur={this.harvestInputs} // could this also be a cause?
     />

Where am I going wrong?

from formsy-react-components.

I am trying to get rid of this error. I am using an input form with two text boxes and I have initialized their state's as an empty string. But still, React is raising this warning for one text box and thus, I am unable to update that textbox. Can anybody suggest me an alternative solution?

from formsy-react-components.

Hi @Dhrumil1808 sorry for late reply here is my code example to remove this error

class DemoPage extends React.Component
{
	constructor(props) {
		super(props);
		this.handleClick = this.handleClick.bind(this);
		this.handleInptChange = this.handleInptChange.bind(this);
		this.state = {isToggleOn: true, input1: '', input2: ''};
	}


	handleClick() {
	    this.setState(prevState => ({
	      	isToggleOn: !prevState.isToggleOn
	    }));
  	}

  	handleInptChange(event) {
  		this.setState({[event.target.name]: event.target.value});
  	}

	render() {
		return (
			React.createElement(
				'h1',
				null,
				'You are now on Demo Page!',
				React.createElement(
					'button',
					{onClick: this.handleClick},
					(this.state.isToggleOn) ? 'ON' : 'OFF'
				),
				React.createElement(
					'input',
					{type: 'text', onChange: this.handleInptChange, name: 'input1', value: this.state.input1},
				),
				React.createElement(
					'input',
					{type: 'text', onChange: this.handleInptChange, name: 'input2', value: this.state.input2},
				)
			)
		);
	}
}

export default DemoPage;

let me know if you still facing same error.

from formsy-react-components.

Hello @stevematdavies Which part of this is using formsy-react-components? We don't have a TextField component.

from formsy-react-components.

@SachaG this worked for me. Thanks!

from formsy-react-components.

@SachaG works for checkbox as well :)
(vanilla React, google brought me here)

from formsy-react-components.

Guys in your state just define the init value

state = {
title : ' ' // init value for the input title 
}

from formsy-react-components.

it is props for me

from formsy-react-components.

Hello there, I'm going to lock down comments on this issue. There isn't really much to add that will help users of this package.

This page is ranking highly on google for the problem described, but I'm wary that more comments will add to the noise rather than the signal on this issue.

Happy coding ✊

from formsy-react-components.