CODEWITHSUNDEEP
htmlreactjs
JavascriptLoser
JavascriptLoser

Reputation: 1962

React JS this.setState does nothing when updating content via a nested component

I am working on a simple react example that will alter the content of a header on the screen based on what a user enters in a text field. Here's the react code:

var GreeterForm = React.createClass({
    onFormSubmit: function(e){
        e.preventDefault();

        var name = this.refs.name;

        this.refs.name.value = '';
        this.props.onNewName(name);
    },

    render: function(){
        return(
            <form onSubmit={this.onFormSubmit}>
                <input type="text" ref="name"/>
                <button>Set Name</button>
            </form>
        );
    }
});

var Greeter = React.createClass({

    //returns an object of the default properties to be used
    //these are used if no properties are passed in
    getDefaultProps: function(){
        return {
            name: 'React!',
            message: "this is from a component!"
        };
    },

    //maintains a state for the component. Maintains the state as an object
    //this is a default method for react and we override it.
    getInitialState: function(){
       return {
            name: this.props.name
       };
    },

    handleNewName: function(name){
        this.setState({
            name: name
        });
    },

    //renders the greeter react component
    render: function() {
        var name = this.state.name;
        var message = this.props.message;
        return (
            <div>
                <h1>Hello {name}!</h1>
                <p>{message}</p>

                <GreeterForm onNewName={this.handleNewName}/>
            </div>
        );
    }
});

var firstName = "DefaultName";
var mess = "This is a message from react."

//note that name and message are passed in as properties
ReactDOM.render(<Greeter name={firstName} message={mess}/>, document.getElementById('app'));

You can see that GreeterForm is nested within Greeter and is supposed to alter the content of the h1 tag when the user submits.

However, the content of the h1 tag is not changing. I sprinkled alert(name.value) along the code to ensure the correct name from the input field was being passed around, and that all checked out.

What could it be? Is something wrong with my setState function?

Here's the HTML if needed:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
</head>

<body>
    <div id="app">

    </div>
    <script type="text/babel" src="app.jsx"></script>
</body>

</html>

Upvotes: 0

Views: 412

Answers (1)

Kishore Barik
Kishore Barik

Reputation: 770

You are not sending value of input. you are sending whole html element

in onFormSubmit function change this line

var name = this.refs.name;

to 

var name = this.refs.name.value;

Upvotes: 3

Related Questions