CODEWITHSUNDEEP
reactjsformsreact-bootstrap
TedTrippin
TedTrippin

Reputation: 3667

react-bootstrap - Form.Control defaultValue not updated when re-rendered

When I call setState and my form is re-rendered, the value of the text input doesn't change.

import React, { Component } from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';

export default class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: "new"
        }
    }

    approve = (e) => {
        this.setState({
            status: "I'm newer than you!"
        });
        e.preventDefault();
    }

    render() {
        return (
            <div>
                Status is {this.state.status}
                <Form onSubmit={this.approve}>
                    <Form.Group as={Row} controlId="status">
                        <Form.Label column >Status</Form.Label>
                        <Col>
                            <Form.Control readOnly type="text" size="sm" defaultValue={this.state.status} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row}>
                        <Button type="submit">approve</Button>
                    </Form.Group>
                </Form>
            </div>
        );
    }
}

When I click on the button, I see the static text ("Status is ...") get updated but the input field does not. Have I wrongly assumed the text input should update?

Upvotes: 2

Views: 3615

Answers (1)

deepanshu
deepanshu

Reputation: 663

If you want to change it, you can replace 'defaultValue' with 'value' in FormControl component. 

<Form.Control readOnly type="text" size="sm" value={this.state.status} />

Upvotes: 5

Related Questions