React control parent state with input child on change method

Question

I have the following:

import React from 'react';
import {render} from 'react-dom';

class TShirt extends React.Component {
    render () {
        return <div className="tshirt">{this.props.name}</div>;
    }
}

class FirstName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            submitted: false
        };
    }
    getName () {
        var name = this.refs.firstName.value;
        this.setState({ submitted: true }, function() {
          this.props.action(name);
        });
    }
    render () {
        return (
            <div>
                <h2>tell us your first name</h2>
                <form>
                    <input 
                        type="text"
                        ref="firstName"
                        onChange={this.getName.bind(this)}
                    />
                    <div className="buttons-wrapper">
                        <a href="#">back</a>
                        <button>continue</button>
                    </div>
                </form>
            </div>
        );
    }
}

class Nav extends React.Component {
    render () {
        return <p>navigation</p>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ''
        };
    }
    getName (tshirt) {
        this.setState({ name:tshirt })
    }
    render () {
        return (
            <section>
                <Nav />
                <TShirt name={this.state.name} />
                <FirstName action={this.getName} />
            </section>
        );
    }
}

render(<App/>, document.getElementById('app'));

I am tring to update the "TShirt" component with the value coming from the onChange method (using props) from the "FirstName" component.

I have an overall state inside the wrapper to control everything, however when I start typing the name insdie the input i get this error:

Uncaught TypeError: this.setState is not a function

referring to:

getName (tshirt) {
    this.setState({ name:tshirt })
}

Possible duplicate of [OnClick Event binding in React.js](http://stackoverflow.com/questions/27397266/onclick-event-binding-in-react-js) — Jordan Running, Jan 09 '17 at 18:54

score 1 · Accepted Answer · answered Jan 09 '17 at 18:51

1

You have to bind the getName function to this.

In your constructor put

this.getName = this.getName.bind(this);

Your constructor should then look like

constructor(props) {
    super(props);
    this.state = {
        name: ''
    };
    this.getName = this.getName.bind(this);
}

answered Jan 09 '17 at 18:51

Ajackster

1,724
1
12
12

This is correct, but you could also use an ES6 fat arrow function which will automatically bind `this`, like `getName (tshirt) => { ... }`. – Daniel B Jan 09 '17 at 18:53

React control parent state with input child on change method

1 Answers1