2

I don't understand why my state isn't updating in this code. I reviewed an answer here but doesn't seem to answer my question b/c I only have one component to bind to.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor() {
        super();
        this.state={
            headline: 'this is headline state',
            cat: 25
        }
    }

    update(e) {
        this.setState=({headline: e.target.value})
    }

    render() {
        let headline=this.state.headline
        return (
            <div>
                <input type="text"
                onChange={this.update.bind(this)} />
                <h1>{headline}</h1>
            </div>
        );
    }
}

App.propTypes = {
    headline: React.PropTypes.string,
    cat: React.PropTypes.number
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
    );
1
  • Also a bit of boilerplate reduction, you don't need to use constructor to set default state, you can use componentWillMount() { this.setState( { your initial state }) }
    – Foxhoundn
    Commented Apr 26, 2016 at 15:58

2 Answers 2

4

setState is method not property, remove =

update(e) {
   this.setState({ headline: e.target.value });
}

Example

0
1

There is a type in your code:

this.setState=({headline: e.target.value})

Should be

this.setState({headline: e.target.value})

The rest looks fine.

Not the answer you're looking for? Browse other questions tagged or ask your own question.