React - Unable to get pre-filled form

Question

Objective:

Need to pre-fill the form if the user has address saved in the DB.

Issue:

I am passing down the address object (coming from backend for the logged in user). :

{
city: "CA"
line1: "testline1"
line2: "testline2"
phone: "7772815615"
pin: "1234"
state: "CA"
user: "5eea03a736b70722c83a7b63"
}

Though I am able to console log it, but I am unable to pre-populate it in the form (rendered by the child component)

Child Component

    let addressFinalValue = {};
    const addressValue = (e) => {
        addressFinalValue[e.target.name] = e.target.value;
    };
    const propsAddress = props.address;
    const [address, setAddress] = useState(propsAddress);
    console.log(propsAddress); // < -- ABLE TO CONSOLE LOG IT 
    return (
<div>
    <div className="modal-header ">
        <h5 className="modal-title text-center">
            {address ? 'Please enter your address' : 'Please confirm your address'}
        </h5>
        <button className="close" data-dismiss="modal" aria-label="close">
            <span className="edit-order-button" aria-hidden="true">Edit order</span>
        </button>
    </div>
    <div className="container my-4">
        <form onSubmit={submitHandler}>
            {error && <p className="login-error" style={{ color: "red" }}>{error}</p>}
            <div className="form-group">
                <input id="address-line-1" className="form-control" value={propsAddress.line1}
                    onChange={addressValue} name="line1" type="text" placeholder="Line 1" />
            </div>
            <div className="form-group">
                <input id="address-line-2" className="form-control" value={propsAddress.line2}
                    onChange={addressValue} name="line2" type="text" placeholder="Line 2" />
            </div>
            <div className="form-group">
                <input id="city" className="form-control" value={propsAddress.city}
                    onChange={addressValue} name="city" type="text" placeholder="City" />
            </div>
            <div className="form-group">
                <input id="state" className="form-control" value={propsAddress.state}
                    onChange={addressValue} name="state" type="text" placeholder="State" />
            </div>
            <div className="form-group">
                <input id="pin" className="form-control" value={propsAddress.pin}
                    onChange={addressValue} name="pin" type="text" placeholder="PIN" />
            </div>
            <div className="form-group">
                <input id="phone" className="form-control" value={propsAddress.phone}
                    onChange={addressValue} name="phone" type="text" placeholder="Phone Number" />
            </div>
            <hr />
            <button className="btn btn-success">Save Address & Continue</button>
        </form>
    </div>
</div>    );

Is there something I am missing here? I don't know what it is.

Answer 1

I would achieve this using the following:

1. Make the child component a class with state. Pass the child component a populate prop, with the address values.

<ChildComponent populate={address} />

constructor(props){
  this.state = {
    ...props.populate
  }
}

handleAddressChange(e, addressItem){
    this.setState({[addressItem]: event.target.value});
}

Then, in your form, set the value of each form item equal to the stateful address value. For example:

<div className="form-group">
    <input id="address-line-1" className="form-control" value={this.state.line1}
    onChange={(e) => handleAddressChange(e, 'line1')} name="line1" type="text" placeholder="Line 1" />
</div>

Make sure your onChange event handler is updating the child components this.state.address value using setState.

Checkout this file for more info: https://github.com/ccrowley96/grocerylist/blob/master/client/src/components/AddEditModal/AddEditModal.js

I do something very similar.