key is not defined React
Question
I am building small task. When we press button "add user" - we see a form, which has inputs inside. When we put info in inputs - we can press button "send info". And we add a new user. I use react to build it. When I add new user to Users array I create id for this user. And then I use this id. But a problem is that after I put info in form and press button "send info" - I see in console "Inline Babel script:39 Uncaught ReferenceError: key is not defined". Why does it happen?
.user{ display: flex; width: 100vw; } .user-name, .user-phone, .user-address, .user-photo, .buttons{ width: 20vw; } #header{ background: goldenrod; display: flex; width: 100vw; margin-top: 6vw; } #add-user-btn{ position: absolute; top:2vw; right: 1vw; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <link rel="stylesheet" href="main.css"> </head> <body> <div id="root"></div> <script type="text/babel"> class MainContainer extends React.Component{ constructor(){ super(); this.state={ Users: [] } } render(){ let usersToShow=this._getUser(); let id; return( <div> <HeaderTab/> {usersToShow} <Form addUser={this._addUser.bind(this)}/> </div> ) } makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < 10; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } _addUser(name, phone, address){ const user = { id: this.makeid(), name, phone, address } console.log(user.id); this.setState({Users: this.state.Users.concat([user])}) } _getUser(){ return (this.state.Users.map((user)=>{ return( <User key={user.id} name={user.name} phone={user.phone} address={user.address}/> ); }) ) } } class Form extends React.Component{ constructor(){ super(); this.state={ displayModal: false } } render(){ let form; let btnText; if (this.state.displayModal){ form=<div id ="form"> <form onSubmit ={this._handleSubmit.bind(this)}> <input type="text" placeholder="name" ref={(input)=>this._name=input}></input> <input type="text" placeholder="address" ref={(input)=>this._address=input}></input> <input type="tel" placeholder="phone" ref={(input)=>this._phone=input}></input> <button type="submit">Send info</button> </form> </div>; btnText= 'cansel' } else{ form=null; btnText= 'addUser' } return( <div> <button id="add-user-btn" onClick={this._showModal.bind(this)}>{btnText}</button> {form} </div>) } _showModal(){ this.setState( {displayModal: !this.state.displayModal} ); } _handleSubmit(event){ event.preventDefault(); let name=this._name; let phone=this._phone; let address=this._address; this.props.addUser(name.value, phone.value, address.value); } } class HeaderTab extends React.Component{ render(){ return( <header id="header"> <div className="user-name">Name</div> <div className="user-phone">Phone</div> <div className="user-address">Address</div> <div className="user-photo">Photo</div> <div className="buttons"></div> </header> ) } } class User extends React.Component{ render(){ return( <div className="user" key={key}> <div className="user-name">{name}</div> <div className="user-phone">{phone}</div> <div className="user-address">{address}</div> <div className="user-photo"></div> <div className="buttons"> <button className="delete">delete</button> <button className="edit">edit</button> </div> </div> ) } } ReactDOM.render( <MainContainer/>, document.getElementById('root') ); </script> </body> </html>
2 answers
solution1
1 2018-05-02 14:26:52
console.log(id); should be changed to console.log(user.id);
solution2
0 2018-05-02 22:09:01
The problem is in the implementation of this class:
class User extends React.Component{
render(){
return(
<div className="user" key={key}>
<div className="user-name">{name}</div>
<div className="user-phone">{phone}</div>
<div className="user-address">{address}</div>
<div className="user-photo"></div>
<div className="buttons">
<button className="delete">delete</button>
<button className="edit">edit</button>
</div>
</div>
)
}
}
The render function refers to several undefined variables.
In order for this class to execute without errors, the render function either needs to remove the references to undefined variables or provide definitions for those variables.
It's worth noting that this interpolation syntax:
<div>{ someVariable }</div>
requires someVariable to be a defined variable within the scope of the block. The code inside the interpolation (ie someVariable in this case) is executed as ordinary JavaScript.
This feature allows us to write code like this:
<div>2 + 2 is { 2 + 2 }</div>
Which is rendered like this:
<div>2 + 2 is 4</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.