[FIXED] how to fill a form with the input from another form with the same fields

Issue

I have two sections: Billing address and Shipping address and they both have the same exact text fields. I want to be able to fill shipping address with the billing address inputs if they're going to be the same with a button or checkbox. they both have the same type of state as shown in my code below

const Details = ({ hendelNext, entityType }) => {
 const [bilingAddress, setBilingAddress] = useState({
    _id: '',
    type: 'Billing',
    flatNumber: '',
    addressLine1: '',
    addressLine2: '',
    addressLine3: '',
    postcode: '',
    state: '',
    city: '',
    country: '',
    mobile: '',
    telephone: '',
    fax: '',
    email: '',
})
const [shippingAddress, setShippingAddress] = useState({
    _id: '',
    type: 'Shipping',
    flatNumber: '',
    addressLine1: '',
    addressLine2: '',
    addressLine3: '',
    postcode: '',
    state: '',
    city: '',
    country: '',
    mobile: '',
    telephone: '',
    fax: '',
    email: '',
})
   if (type === 'biling') {
        if (name === "flatNumber" || name === "addressLine1" || name === "addressLine2" || name === "addressLine3" || name === "state" || name === "city" || name === "country" || name === "email") {
            setBilingAddress({ ...bilingAddress, [name]: e.target.value })
        } else if (name === "mobile" || name === "telephone" || name === "fax" || name === "postcode") {
            if (e.target.value === '' || numberReg.test(e.target.value)) {
                setBilingAddress({ ...bilingAddress, [name]: e.target.value })
            }
        }
    }
    else if (type === 'shipping') {
        if (name === "flatNumber" || name === "addressLine1" || name === "addressLine2" || name === "addressLine3" || name === "state" || name === "city" || name === "country" || name === "email") {
            setShippingAddress({ ...shippingAddress, [name]: e.target.value })
        } else if (name === "postcode" || name === "mobile" || name === "telephone" || name === "fax") {
            if (e.target.value === '' || numberReg.test(e.target.value)) {
                setShippingAddress({ ...shippingAddress, [name]: e.target.value })
            }
        }
    }
}
      return (
             <div>
                <h2 className='mb-3'>**Billing address**</h2>
                
                    <Row>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Flat number"
                                variant="standard"
                                color="warning"
                                value={bilingAddress.flatNumber}
                                onChange={(e) => handleChange(e, 'flatNumber', 'biling')}
                                disabled={isView} />
                        </Col>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Line 1"
                                variant="standard"
                                color="warning"
                                value={bilingAddress.addressLine1}
                                onChange={(e) => handleChange(e, 'addressLine1', 'biling')}
                                disabled={isView}  />
                        </Col>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Line 2"
                                variant="standard"
                                color="warning"
                                value={bilingAddress.addressLine2}
                                onChange={(e) => handleChange(e, 'addressLine2', 'biling')}
                                disabled={isView} />
                        </Col>
                    </Row>
                 </div>

            <div className='form'>
                <h2 className='mb-3'>**Shipping address**</h2>
                <div>
                    <Row>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Flat number"
                                variant="standard"
                                color="warning"
                                value={shippingAddress.flatNumber}
                                onChange={(e) => handleChange(e, 'flatNumber', 'shipping')}
                                disabled={isView} />
                        </Col>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Line 1"
                                variant="standard"
                                color="warning"
                                value={shippingAddress.addressLine1}
                                onChange={(e) => handleChange(e, 'addressLine1', 'shipping')}
                                disabled={isView} />
                        </Col>
                        <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
                            <TextField
                                label="Line 2"
                                variant="standard"
                                color="warning"
                                value={shippingAddress.addressLine2}
                                onChange={(e) => handleChange(e, 'addressLine2', 'shipping')}
                                disabled={isView} />
                        </Col>
                    </Row>
                </div>
      )

NB: there are more fields but they were truncated for simplicity.

If the billing address will be the same with shipping address I want to add a button that onclick will fill the shipping address with the input details already in billing address.

Solution

Since you only use states, you could just set the shipping address on click on the button.

<button onClick={()=> setShippingAddress({...bilingAddress, type: "Shipping"})}>Use Billing Address</button>

Answered By - Disco
Answer Checked By - - Terry (ReactFix Volunteer)