CODEWITHSUNDEEP
formsreactjsreduxreact-props
Raphael
Raphael

Reputation: 576

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

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

Upvotes: 0

Views: 1284

Answers (2)

pinturic
pinturic

Reputation: 2263

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

Upvotes: 0

dungmidside
dungmidside

Reputation: 518

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.

Upvotes: 1

Related Questions