toggle doesn't work in react, no error

Question

My intention is to show the input field when the edit is pressed but with below code it doesn't work, I couldn't find out what is the problem, no error in the console.

http://jsbin.com/yezediloke/1/edit?js,console,output

class TodoItem extends React.Component {
  constructor(){
    super()
    this.isEditing = false;
    this.onClickEdit = this.onClickEdit.bind(this);
  }
  onClickEdit(){
    this.setState({isEditing: !this.isEditing});
  }
  render(){
    return(

      <li>
        <span>{this.props.item}</span>
      {this.isEditing ? '<span><input type="text" /></span>' :''}
      &nbsp;&nbsp;<button onClick={this.onClickEdit}>Edit</button>
      <button>Save</button>
      </li>
    )
  }
}

first of all, remove the '' from '<span><input type="text" /></span>' — A. L
– A. L, Commented Jan 9, 2017 at 13:08

A. L · Accepted Answer · 2017-01-09 13:33:17Z

2

4 Problems:

1: You didn't set the initial state in constructor:

  constructor(){
    super()
    this.isEditing = false;
    this.onClickEdit = this.onClickEdit.bind(this);
    this.state = { isEditing: false };
  }

2 and 3: Span does not need '' and this.isEditing should be this.state.isEditing

 render(){
    return(

      <li>
        <span>{this.props.item}</span>
/*Look here>>>*/ {this.state.isEditing ? <span><input type="text" /></span> :''}
      &nbsp;&nbsp;<button onClick={this.onClickEdit}>Edit</button>
      <button>Save</button>
      </li>
    )
  }

4: this.isEditing should be this.state.isEditing in onClickEdit

onClickEdit(){
    this.setState({isEditing: !this.state.isEditing});
  }

This works: http://jsbin.com/ganimopalo/1/edit?js,console,output

edited Jan 9, 2017 at 13:33

answered Jan 9, 2017 at 13:10

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Jenny Mok Over a year ago

this.isEditing = false is not state?

A. L Over a year ago

That is not in the state, that is just in the class. this.state is the state. Hence, this.state.isEditing is where the isEditing you want to be looking at

Jenny Mok Over a year ago

jsbin.com/cogopuvoke/1/edit?js,console,output can you take a look? doesn't work.

A. L Over a year ago

Because you're still using this.isEditing in the render part

Jenny Mok Over a year ago

A. Lau, why this save handler has error? jsbin.com/cogopuvoke/1/edit?js,console,output

|

Collectives™ on Stack Overflow

toggle doesn't work in react, no error

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related