Блог

Я пишу приложение для контроля долгов. Я написал логику для своих компонентов. Я использую реквизиты и обратные вызовы для передачи значений от дочернего элемента к родительскому.

Я написал 3 файла.

App.js

 const App = () => {
  const [debts, setDebts] = useState([
    {id: 1, debtor: "Kamil", amount: 14.3, loanFrom: new Date(2021,1,1).toLocaleDateString(), loanTo: new Date(2021,1,4).toLocaleDateString(), paidBackAmount: 0, isPaidBack: false},
    {id: 2, debtor: "Adam", amount: 30, loanFrom: new Date(2020,12,14).toLocaleDateString(), loanTo: new Date(2020,12,30).toLocaleDateString(), paidBackAmount: 10, isPaidBack: false},
    {id: 3, debtor: "Kamil", amount: 20, loanFrom: new Date(2020,12,18).toLocaleDateString(), loanTo: new Date(2020,12,20).toLocaleDateString(), paidBackAmount: 20, isPaidBack: true},
    {id: 4, debtor: "Marcin", amount: 40, loanFrom: new Date(2020,12,15).toLocaleDateString(), loanTo: new Date(2021,1,1).toLocaleDateString(), paidBackAmount: 20, isPaidBack: false},
  ])
  const changeDebtPaidBack = index => {
    let cDebts = [...debts];
    let indexToChange = debts.findIndex(debt=>debt.id===parseInt(index))
    if(cDebts[indexToChange].isPaidBack){
      cDebts[indexToChange].isPaidBack = !cDebts[indexToChange].isPaidBack;
      cDebts[indexToChange].paidBackAmount = cDebts[indexToChange].amount;
    }
    else{
      cDebts[indexToChange].isPaidBack = !cDebts[indexToChange].isPaidBack;
      cDebts[indexToChange].paidBackAmount = 0;
    }
    setDebts(cDebts) 
  }
//RETURN
  return (
    <div className="App">
      <LoanTable debts={debts} ofPaid={false} callback={changeDebtPaidBack}/>
      {showPaidBacks amp;amp; <LoanTable debts={debts} ofPaid={true} /> }
    </div>
  );
}
 

LoanTable.js

 const LoanTable = (props) => {
    const handler = index =>{
        props.callback(index)
    }
    return (
        
    <table className="table table-striped table-bordered">
        <thead>
            {...}
        <tbody>
            {props.debts.filter(debt => debt.isPaidBack===props.ofPaid)
             .map(debt => <LoanTableRow debt={debt} onClickRow={handler}/>)}
        </tbody>
    </table>
    )
}
 

LoanTableRow.js

 const LoanTableRow = ({debt, onClickRow}) => {
    return (
            <tr key={debt.index}>
              <td>{debt.debtor}</td>
              <td>{debt.amount}</td>
              <td>{debt.paidBackAmount}</td>
              <td>{debt.loanFrom}</td>
              <td>{debt.loanTo}</td>
              <td>
                <input type="checkbox" checked={debt.isPaidBack} name={debt.id}
                  onClick={event => onClickRow(event.target.name)}
                />
              </td>
            </tr>
    )
}
 

Когда я меняю флажок в LoanTableRow, когда он снят, он меняет состояние хорошо, как я и ожидал.
Но если это проверено, реагируйте на выброс TypeError: props.callback is not a function

Как я могу решить мою проблему и сохранить функциональность моего кода? Я пробовал несколько способов, но без ожидаемого результата: (