CODEWITHSUNDEEP
javascriptreactjs
Alex Merced
Alex Merced

Reputation: 150

Component won't update

I am trying to to create a component that display what is typed in an input field real time. I've seen it done using two components but I don't see why I couldn't do the same thing in one component.

The state is set in the constructor, I created a function that triggered by the onChange event and should trigger a function that calls this.setState to change the state to the new input but it does not seem to work.

You can see the code here: https://codepen.io/AlexMercedCoder/pen/LYPbOXE?editors=0010

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState(title2);
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

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

Upvotes: 1

Views: 68

Answers (4)

Alberto Perez
Alberto Perez

Reputation: 2922

You just need to do the following: 

class App extends React.
  this.state = { title: "Welcome!" };

  changeTitle(e) {
    if (e && e.target && e.target.value) {
      var title2 = e.target.value;
      this.setState({ title: e.target.value });
    }
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle} />
      </div>
    );
  }
}

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

Your problem was that you were trying to use title2 as a shorthand property for the state but there's no title2 in the state.

Upvotes: -1

Maxime Girou
Maxime Girou

Reputation: 1570

The problem come from your setStatefunction You should provide an object with the key of wich state property you wanna change

this.setState({myProperty : myValue})

your code must be like : 

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState({title : title2});
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

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

Upvotes: 1

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

You need update your setState() statement to update title of the component's state and also make the <input /> a controlled component by adding a value property to ensure the value in the input changes as you the user types:

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState({ title: title2 });
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input value={this.state.title} onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

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

Hopefully that helps!

Upvotes: 1

Shahzad
Shahzad

Reputation: 2063

You're not setting the state properly. You need to say what you are updating in the state:

this.setState({title: title2});

Upvotes: 2

Related Questions