CODEWITHSUNDEEP
reactjs
Anraiki
Anraiki

Reputation: 796

Can't get State to change

I am new to React and using a tutorial to get me started in this framework.

My code:

<html>
    <head>
        <script src="https://fb.me/react-with-addons-0.13.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <script type="text/jsx">
            var HelloWorld = React.createClass({
                getInitialState: function() {
                    return {
                        name: "Test",
                        price: ""
                    };
                },
                handleNameChange: function(event) {
                    this.setState({ name: event.target.value });
                },
                handlePriceChange: function(event) {
                    this.setState({ price: event.target.value });
                },
                render: function() {
                    return (
                            <div>
                                <form>
                                    <input onChange="{this.handleNameChange}" name="proposal" type="text" placeholder="Proposal Name"/>
                                    <br/>
                                    <input onChange="{this.handlePriceChange}" name="proposal_price" type="text" placeholder="price"/>
                                    <br/>
                                    <input type="submit" value="submit" disabled="{this.state.text.length == 0 && !this.state.photoAdded}"/>
                                </form>
                                <br/>
                                {this.state.name}
                            </div>
                    );
                }
            });

            React.render(
                    <HelloWorld />,
                    document.getElementById('content')
            );

        </script>
    </body>
</html>

The state {this.state.name} or {this.state.price} are not showing any changes when you typed into their correlating labels.

What am I doing wrong?

Upvotes: 0

Views: 49

Answers (2)

nitishagar
nitishagar

Reputation: 9413

You need to set the value for the input box to the changing state (value={this.state.<variable_name>}). Like:

<input onChange={this.handleNameChange} name="proposal" type="text" value={this.state.name} placeholder="Proposal Name"/>

Upvotes: 1

Anraiki
Anraiki

Reputation: 796

onChange="{this.handleNameChange}"

Apparently I am not suppose to have quotation on these.

onChange={this.handleNameChange}

fixed it.

Upvotes: 0

Related Questions