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 anonChange
handler. This will render a read-only field. If the field should be mutable usedefaultValue
. Otherwise, set eitheronChange
orreadOnly
. Check the render method ofAppFrame
.
My AppFrame component is below:
JavaScript
x
56
56
1
class AppFrame extends Component {
2
render() {
3
return (
4
<div>
5
<header className="navbar navbar-fixed-top navbar-shadow">
6
<div className="navbar-branding">
7
<a className="navbar-brand" href="dashboard">
8
<b>Shire</b>Soldiers
9
</a>
10
</div>
11
<form className="navbar-form navbar-left navbar-search alt" role="search">
12
<div className="form-group">
13
<input type="text" className="form-control" placeholder="Search..."
14
value="Search..."/>
15
</div>
16
</form>
17
<ul className="nav navbar-nav navbar-right">
18
<li className="dropdown menu-merge">
19
<span className="caret caret-tp hidden-xs"></span>
20
</li>
21
</ul>
22
</header>
23
24
<aside id="sidebar_left" className="nano nano-light affix">
25
26
<div className="sidebar-left-content nano-content">
27
28
<ul className="nav sidebar-menu">
29
<li className="sidebar-label pt20">Menu</li>
30
<li className="sidebar-label">
31
<IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
32
</li>
33
<li className="sidebar-label">
34
<Link to="/fixtures" activeClassName="active">Fixtures</Link>
35
</li>
36
<li className="sidebar-label">
37
<Link to="/players" activeClassName="active">Players</Link>
38
</li>
39
</ul>
40
41
</div>
42
43
</aside>
44
<section id="content_wrapper">
45
<section id="content" className="table-layout animated fadeIn">
46
{this.props.children}
47
</section>
48
</section>
49
</div>
50
51
)
52
}
53
}
54
55
export default AppFrame;
56
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.
Advertisement
Answer
Try this,
JavaScript
1
2
1
const [email, SetEmail] = useState("");
2
JavaScript
1
7
1
<Form.Control
2
onChange={e => SetEmail(e.target.value)}
3
type="email"
4
name="email"
5
value={email || ""}
6
/>
7