Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Failed form propType: You provided a `value` prop to a form field without an `onChange` handler

When I load my react app I get this error in the console.

Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Check the render method of AppFrame.

My AppFrame component is below:

class AppFrame extends Component {
    render() {
        return (
            <div>
                <header className="navbar navbar-fixed-top navbar-shadow">
                    <div className="navbar-branding">
                        <a className="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form className="navbar-form navbar-left navbar-search alt" role="search">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search..."
                                   value="Search..."/>
                        </div>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li className="dropdown menu-merge">
                            <span className="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" className="nano nano-light affix">

                    <div className="sidebar-left-content nano-content">

                        <ul className="nav sidebar-menu">
                            <li className="sidebar-label pt20">Menu</li>
                            <li className="sidebar-label">
                                <IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/fixtures" activeClassName="active">Fixtures</Link>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/players" activeClassName="active">Players</Link>
                            </li>
                        </ul>

                    </div>

                </aside>
                <section id="content_wrapper">
                    <section id="content" className="table-layout animated fadeIn">
                        {this.props.children}
                    </section>
                </section>
            </div>

        )
    }
}

export default AppFrame;

I am struggling to work out what I am actually doing wrong here. The application starts up and works but I am trying to remove all console warning/errors.

like image 927
Elliot Pohath Avatar asked Apr 22 '17 06:04

Elliot Pohath


4 Answers

You've put a value directly in your search input, I don't see the benefit there because you already have a placeholder. You could either remove the value from:

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

to this:

<input type="text" className="form-control" placeholder="Search..." />

Or if you think you must have it, set it as defaultValue:

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

Documentation: https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

like image 86
jolvera Avatar answered Nov 19 '22 20:11

jolvera


If you don't take the input value from the user by this input field, then you need to make this field read-only by setting the defaultValue.

In case if you want to set the value and involve user interaction. You should send onChange event to update the state of initial value. This is like two-way binding as angular support.

state = {
   keyword: 'test' 
} 

inputChangedHandler = (event) => {
    const updatedKeyword = event.target.value;
    // May be call for search result
}

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
} 
like image 33
reza.cse08 Avatar answered Nov 19 '22 20:11

reza.cse08


the warning appears because you set a value attribute on the input and don't provide any handler to update it. there is two way to do so:

  1. you can use a ref to get form values from the DOM.

    https://reactjs.org/docs/uncontrolled-components.html

  2. set onChange handler function.

like image 4
Shimon Itkin Avatar answered Nov 19 '22 19:11

Shimon Itkin


Try this,

const [email, SetEmail] = useState("");
<Form.Control
    onChange={e => SetEmail(e.target.value)}
    type="email"
    name="email"
    value={email || ""}
/>
like image 3
Toufiquer Avatar answered Nov 19 '22 20:11

Toufiquer