CODEWITHSUNDEEP
javascriptnode.jsreactjs
Keith Lashley
Keith Lashley

Reputation: 37

Console.log not working on Reactjs app

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.com/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.com/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>

Upvotes: 2

Views: 6399

Answers (4)

Ryan Dines
Ryan Dines

Reputation: 1037

The problem is that binding to this isn't being performed. In other words 'this' of the form is different than 'this' of the component, hence no output. Add this to your button onSubmit=this.onSubmit.bind(this). That's alotta thisses to explain how to print to console.

Upvotes: 2

Paolo Dell&#39;Aguzzo
Paolo Dell&#39;Aguzzo

Reputation: 1431

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.

Upvotes: 0

coockoo
coockoo

Reputation: 2382

form.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.org/docs/forms.html#controlled-components

Upvotes: 2

Chad Moore
Chad Moore

Reputation: 764

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.org/docs/react-component.html#constructor

Upvotes: 1

Related Questions