I am doing a reactjs project but it there is a problem. I am suppose to enter a text into the input the text is suppose to appear in the console.log. Between onSubmit function between 42 to 52. Everyone is saying that I need to add a key however I do not know where do had this key to the code to get the input box to render the text. Any help you could give me would be appreciated.
Click here to view the image
Here is the code app.js
let channels = [
{name: 'Hardware Support'},
{name: 'Software Support'}
];
class Channel extends React.Component {
onClick(){
console.log('I was clicked', this.props.name);
}
render(){
return(
<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
)
}
}
class ChannelList extends React.Component{
render(){
return(
<ul>
{this.props.channels.map(channel => {
return (
<Channel name={channel.name} />
)
}
)}
</ul>
)
}
}
class ChannelForm extends React.Component{
constructor(props){
super(props);
this.state = {};
}
onChange(e){
this.setState({
channelName: e.target.value
});
//console.log(e.target.value);
}
onSubmit(e){
let {channelName} = this.state;
console.log(channelName);
channels.push({
name: channelName
});
this.setState({
channelName: ''
});
e.preventDefault();
}
render(){
return(
<form onSubmit={this.onSubmit.bind(this)}>
<input type='text'
onChange={this.onChange.bind(this)}
value={this.state.channelName}
/>
</form>
)
}
}
class ChannelSection extends React.Component{
render(){
return(
<div>
<ChannelList channels={channels}/>
<ChannelForm />
</div>
)
}
}
ReactDOM.render(<ChannelSection />,
document.getElementById('app'));
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href=".3.7/css/bootstrap.min.css">
<style type="text/css">
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid">
</div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
I am doing a reactjs project but it there is a problem. I am suppose to enter a text into the input the text is suppose to appear in the console.log. Between onSubmit function between 42 to 52. Everyone is saying that I need to add a key however I do not know where do had this key to the code to get the input box to render the text. Any help you could give me would be appreciated.
https://github./lashleykeith/GoAndReactjs/tree/master/app Click here to view the image
Here is the code app.js
let channels = [
{name: 'Hardware Support'},
{name: 'Software Support'}
];
class Channel extends React.Component {
onClick(){
console.log('I was clicked', this.props.name);
}
render(){
return(
<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
)
}
}
class ChannelList extends React.Component{
render(){
return(
<ul>
{this.props.channels.map(channel => {
return (
<Channel name={channel.name} />
)
}
)}
</ul>
)
}
}
class ChannelForm extends React.Component{
constructor(props){
super(props);
this.state = {};
}
onChange(e){
this.setState({
channelName: e.target.value
});
//console.log(e.target.value);
}
onSubmit(e){
let {channelName} = this.state;
console.log(channelName);
channels.push({
name: channelName
});
this.setState({
channelName: ''
});
e.preventDefault();
}
render(){
return(
<form onSubmit={this.onSubmit.bind(this)}>
<input type='text'
onChange={this.onChange.bind(this)}
value={this.state.channelName}
/>
</form>
)
}
}
class ChannelSection extends React.Component{
render(){
return(
<div>
<ChannelList channels={channels}/>
<ChannelForm />
</div>
)
}
}
ReactDOM.render(<ChannelSection />,
document.getElementById('app'));
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid">
</div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
- Did any of the answers below help? – Chad Moore Commented Jun 22, 2018 at 17:33
4 Answers
Reset to default 2form.onSubmit gets called on 'submit' event in form. To simulate this event, you need a button in your form that looks like
<button type="submit" value="Submit form label"/>
And on click on this button your this.onSubmit.bind(this) will get called.
There is an example in official React documentation that shows form usage and onSubmit event.
https://reactjs/docs/forms.html#controlled-ponents
The problem is that binding to this isn't being performed. In other words 'this' of the form is different than 'this' of the ponent, hence no output. Add this to your button onSubmit=this.onSubmit.bind(this). That's alotta thisses to explain how to print to console.
You should do your binding of this.onClick inside a constructor method.
e.g.
class Channel extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
...
}
See https://reactjs/docs/react-ponent.html#constructor
After you have inputed text you have to use the keyboard enter key or you should add a button of type submit inside your form if you want something visible to the user.