How to change the input value in a form with react and redux?

Question

I am creating my edit form with react-redux. Until now, I can get the data of the item that I want to change, but I do not know how to pre-populate the input value, and to be able to change it. Because when I try to tape something in the input, the text does not change.

So, how can I pre-populate the input value, and being able to tape into it.

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


class EditTodoComponent extends React.Component {

    state = {
        text: this.props.todo.text
    }

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

    render() {
        return(
            <div>
                <form>
                    <input type="text" value={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

dungmidside · Accepted Answer · 2018-06-18 06:09:25Z

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.

pinturic · Accepted Answer · 2018-06-18 14:43:56Z

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

edited Jun 18, 2018 at 14:43

answered Jun 17, 2018 at 21:51

pinturic

2,2631 gold badge17 silver badges31 bronze badges

1 Comment

Raphael Over a year ago

Thanks it works better now, but I still do not have the input value pre-populated. Do you have any idea ?

Collectives™ on Stack Overflow

How to change the input value in a form with react and redux?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related