score:0

Try with this:

import React from 'react';
import PropTypes from 'prop-types';
class EditTodoComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            text: this.props.todo.text
        };
        this.defaultText = "default string";
    }

    onChange(e) {
        this.setState({ text: e.target.value });
    }

    render() {
        return(
            <div>
                <form>
                    <input type="text" value={this.state.text || this.defaultText} onChange={(e) => this.onChange(e)}/>
                </form>
            </div>
        );
    }
}

You were missing the constructor definition and the onChange was wrongli bound so that this was not the component itself

score:1

Try this

import React from 'react';
import PropTypes from 'prop-types';

class EditTodoComponent extends React.Component {
    constructor() {
        super();
        this.state = {
          text: this.props.todo.text
    }   
    this.defaultText = "default string";
  }

  onChange(e) {
      this.setState({ text: e.target.value });
  }

  render() {
      return(
          <div>
              <form>
                  <input 
                      type="text" 
                      value= {this.state.text 
                          ? this.defaultText 
                          : this.state.text 
                      } 
                      onChange={this.onChange}/>
              </form>
          </div>
      );
  }
}

EditTodoComponent.propTypes = {
    todo: PropTypes.shape({
        id: PropTypes.number.isRequired,
        completed: PropTypes.bool.isRequired,
        text: PropTypes.string.isRequired
    }).isRequired,
    visible: PropTypes.bool.isRequired
  }

export default EditTodoComponent

Check this.state.text value, if it's null then use defaultValue instead.


Related Query

More Query from same tag