React Hooks, state is reseting to initial state when called onChange is called inside Formatter

[charleskatada]

Hi AllenFang, Thank you for all the support. I just have a question and I am not sure if I am doing it right or if it is even possible.

I am trying to change the value of my react hook state when OnChange is triggered inside formatter but for some reason the state always goes back to initial state ([]) when press any key and the current state is lost.

Here is some part o f my code.

import React, { useState, useEffect } from 'react' import { connect } from 'react-redux' // import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator';

import { Button, CardSubtitle, CardTitle, Col, TabPane, Label, Row, InputGroup, Input

} from "reactstrap"

import Switch from '@material-ui/core/Switch'; import CurrencyInput from 'react-currency-input-field';

import { setChequesCollections } from '../../../store/contracts/actions' import { update } from 'lodash'

export const ChequeInfo = (props) => {

const [cheques,setCheques] = useState([

])

// const updateChequeNo = (e,index) =>{
//     e.preventDefault()
//     console.log(e.target.value)
//     console.log(index)
//     console.log(cheques)
//     // setCheques(tempArray)

// }

const updateChequeName = (e,index) =>{
    e.preventDefault()
    let tempArray = [...cheques]
    let tempElement  = [...tempArray[index]]
    tempElement.chequeName = e.target.value
    tempArray[index] = tempElement
    setCheques(tempArray)
  }

const updateBankName = (e,index) =>{
    e.preventDefault()
    let tempArray = [...cheques]
    let tempElement  = [...tempArray[index]]
    tempElement.bankName = e.target.value
    tempArray[index] = tempElement
    setCheques(tempArray)
}

const updateDate = (e,index) =>{
    e.preventDefault()
    let tempArray = [...cheques]
    let tempElement  = [...tempArray[index]]
    tempElement.date = e.target.value
    tempArray[index] = tempElement
    setCheques(tempArray)
}

const updateAmount = (e,index) =>{
    e.preventDefault()
    let tempArray = [...cheques]
    let tempElement  = [...tempArray[index]]
    tempElement.amount  = e.target.value
    tempArray[index] = tempElement
    setCheques(tempArray)
}

const [columns,setColumns] = useState([
    {
        dataField:'chequeNo',
        text:'Cheque No',
        formatExtraData:{cheques},
        formatter:(cell,row,rowIndex,formatExtraData) => (
                            <input
                                type="text"
                                className="form-control"
                                name={`chequeNo${row.id}`}
                                id={`chequeNo${row.id}`}
                                // defaultValue={}
                                onChange={()=>console.log(formatExtraData)}
                           />

                         )

    },
    {
        dataField:'chequeName',
        text:'NAME',
        formatExtraData:cheques,
        formatter:(cell,row,rowIndex,formatExtraData) => (
                            <input
                                type="text"
                                className="form-control"
                                name={`name ${row.id}`}
                                id={`name ${row.id}`}
                                // defaultValue={}
                                onChange={()=>console.log(formatExtraData)}
                           />

                         )

    },
    {
        dataField:'bankName',
        text:'Bank',
        formatExtraData:cheques,
        formatter:(cell,row,rowIndex,formatExtraData) => (
                            <input
                                type="text"
                                className="form-control"
                                name={`bankName${row.id}`}
                                id={`bankName${row.id}`}
                                // defaultValue={}
                                onChange={()=>console.log(formatExtraData)}
                           />

                         )

    },
    {
        dataField:'date',
        text:'DATE',
        formatExtraData:cheques,
        formatter:(cell,row,rowIndex,formatExtraData) => (
                            <input
                                type="text"
                                className="form-control"
                                name={`date${row.id}`}
                                id={`date${row.id}`}
                                // defaultValue={}
                                onChange={()=>console.log(formatExtraData)}
                           />

                         )

    },
    {
        dataField:'amount',
        text:'AMOUNT',
        formatExtraData:cheques,
        formatter:(cell,row,rowIndex,formatExtraData) => (
                            <input
                                type="text"
                                className="form-control"
                                name={`bankName${row.id}`}
                                id={`bankName${row.id}`}
                                // defaultValue={}
                                onChange={()=>console.log(formatExtraData)}
                           />

                         )

    }

])

var chequeDate = new Date(props.startDate)

const handlePaymentNo = (e) => {
    e.preventDefault()
    setCheques([])
    const count = e.target.value
    var chequeTimeZoneDiff = props.startDate.getTimezoneOffset().toString().substring(1)
    // var chequeTimeZoneDiff = props.startDate().getTimeZoneOffset().toString().substring(1)
    chequeDate.setHours(0, Number(chequeTimeZoneDiff), 0)
    const duration = Math.round(props.endDate - props.startDate)
    const calculateDuration = duration / (1000 * 60 * 60 * 24)

    switch (count) {

        case '1':

        setCheques(chequeArray=>[...chequeArray,{
            index: 0,
            cleared: false,
            contractNo: props.contractNo,
            chequeName: props.selectedTenant.name,
            chequeNo: '00000',
            bankName: '',
            date: new Date(props.startDate).toString(),
            amount: props.selectedProperty.amount,
            propertyId: props.selectedProperty.propertyId
        }])

        break

        default:

            for (let a = 1; a <= count; a++) {

                if (a === 1) {

                    setCheques(chequeArray =>[...chequeArray,{
                        index: 0,
                        cleared: false,
                        contractNo: props.contractNo,
                        chequeName: props.selectedTenant.name,
                        chequeNo: '00000',
                        bankName: '-',
                        date: new Date(props.startDate).toString(),
                        amount: props.selectedProperty.amount / count,
                        propertyId: props.selectedProperty.propertyId
                    }])

                }
                else {
                    chequeDate.setDate(
                        chequeDate.getDate() + (calculateDuration / count) * (a - 1) - 1
                    )
                    setCheques(chequeArray => [...chequeArray,{
                        index: a + 1,
                        cleared: false,
                        contractNo: props.contractNo,
                        chequeName: props.selectedTenant.name,
                        chequeNo: '00000',
                        bankName: '-',
                        date: new Date(chequeDate).toString(),
                        amount: props.selectedProperty.amount / count ,
                        propertyId: props.selectedProperty.propertyId
                    }])

                    console.log(cheques)
                    chequeDate = new Date(props.startDate)
                }
            }
    }

    props.setChequesCollections(cheques)
    // chequeCollections = []
    console.log(chequeCollections)
    console.log(props.chequesCollection)
    console.log(cheques)

}

const options = {
    filterType: 'checkbox'
}

useEffect(() => {
}, [])

return (
    <TabPane tabId="2">
        <div className="dashBordContainer">
            <Row>
                <Col sm="12" lg="4">
                    <label htmlFor="paymentNo" className="control-label">SELECT PAYMENT</label>
                    <InputGroup>
                        <select onChange={handlePaymentNo} name="paymentNo" id="paymentNo" className="form-control">
                            <option value=''>-Select-</option>
                            <option value={1} id='one'>1</option>
                            <option value={2} id='two'>2</option>
                            <option value={3} id='three'>3</option>
                            <option value={4} id='four'>4</option>
                            <option value={5} id='five'>5</option>
                            <option value={6} id='six'>6</option>
                            <option value={7} id='seven'>7</option>
                            <option value={8} id='eight'>8</option>
                            <option value={9} id='nine'>9</option>
                            <option value={10} id='ten'>10</option>
                            <option value={11} id='eleven'>11</option>
                            <option value={12} id='twelve'>12</option>
                        </select></InputGroup>
                </Col>
            </Row>
            <div className="marginTop30" />

            <BootstrapTable
                keyField='index' 
                data={ cheques } 
                columns={ columns } 
                pagination={paginationFactory()}
                />

            {/* <MUIDataTable
                title={"CHEQUE LIST"}
                data={cheques}
                columns={columns}
                options={options}
            /> */}

        </div>

    </TabPane>
)

}

const mapStateToProps = state => {

const { contract, selectedProperty, selectedTenant, contractNo, startDate, endDate, chequesCollection } = state.Contracts

return {
    contract,
    selectedProperty,
    selectedTenant,
    contractNo,
    startDate,
    endDate,
    chequesCollection
}

}

const mapDispatchToProps = { setChequesCollections }

export default connect(mapStateToProps, mapDispatchToProps)(ChequeInfo)