使用子组件更新父 State

Question

I am working on my first React project as a simple spend tracker on CC's. My description might be loose as I am still learning but hopefully you'll see through my code what I am trying to do. I am stuck on mapping my state and giving an index but including the input date and button through each array value of the state.

class App extends Component {
  state = {
    cards: [
      { id: 'asfa1', name: 'Capital One', balance: 28 },
      { id: 'vasdf1', name: 'Barclays', balance: 29 },
      { id: 'asdf11', name: 'Discover', balance: 26 }
    ],
    totalDue: null
    
  }
theTotal = () => {
    let total = 0;
    let cardOne = this.state.cards[0].balance
    let cardTwo = this.state.cards[1].balance
    let cardThree = this.state.cards[2].balance
   total = cardOne + cardTwo + cardThree
   console.log('made it')
    this.setState( { totalDue : total } )
}
updateBalance = (cardIndex) => {
  let cards = [...this.state.cards]
  console.log('The card index is = ' + cardIndex)
  let oldBalance = cards[cardIndex].balance
  console.log(oldBalance)
  const addedBalance = document.getElementById('balanceInput').value;
  
  const newBalance = oldBalance + parseInt(addedBalance)
  cards[cardIndex].balance = newBalance
  this.setState( {cards : cards})


 }
  
  render () {

    let card = (
      <div> 
        {this.state.cards.map( ( cards , index) => {
          return ( 
          <Cards 
          name={cards.name}
          balance={cards.balance}
          update={() => this.updateBalance(index)} 
          />
          )
        })}
      </div>
    )

This is what the parent class will look like. I think it is also worth mentioning that I was going to attach this to a Firebase table and have it submit updates. My original plan was to only update the database once the user hits and update button and the state changes will be posted. But I have also considered having the POST handler be built into each unique Update for the cards. Please see the code below for the child component.

import React from 'react'
import classes from './Cards.css'
import Input from '../Components/Input'

const cards = (props) => {


return (

    <div className={classes.Cards}>
        <p>{props.name}</p>
        <p>{props.balance}</p>
        {props.children}
        <Input type="text" name="amount" />
        <p></p><button onClick={props.update}>Update Balance</button>
    </div>


)}

export default cards;

My issue is that the first card works and updates. But when you click the to put in values for the second card, it uses the first value you put on the first one. If you start on the second card it throws errors and crashes.

Is there a better way to handle the inputs from the child?

Answer 1

App.js

import './App.css';
import React, {Component} from 'react'
import Cards from './Cards'

class App extends Component {
  state = {
    cards: [
      { id: 'asfa1', name: 'Capital One', balance: 28 },
      { id: 'vasdf1', name: 'Barclays', balance: 29 },
      { id: 'asdf11', name: 'Discover', balance: 26 }
    ],
    totalDue: null

  }
theTotal = () => {

    let total = 0;
    this.state.cards.forEach(card => {
      total += card.balance; // looping through each card and adding balance to total
    });

    console.log('made it')
    this.setState( { totalDue : total } )
}
updateBalance = (cardIndex, e) => {

  e.preventDefault();
  const {cards} = this.state;
  console.log('The card index is = ' + cardIndex);

  let oldBalance = cards[cardIndex].balance;
  console.log(oldBalance);
  const addedBalance = e.target[0].value; // target 0 is the input element

  const newBalance = oldBalance + parseInt(addedBalance);
  cards[cardIndex].balance = newBalance;
  this.setState( {cards : cards});



 }

  render () {
    return <div>
      {this.state.cards.map( ( cards , index) => {
        return (
        <Cards
        key={index}
        name={cards.name}
        balance={cards.balance}
        index={index}
        update={this.updateBalance}
        />
        )
      })}
    </div>
  }

}

export default App;

Cards.js

import React from 'react'

const cards = (props) => {


return (

    <div>
        <p>{props.name}</p>
        <p>{props.balance}</p>
        {props.children}
        <form onSubmit={(e) => props.update(props.index, e)}>
          <input type="text" name="amount" />
          <p></p><button>Update Balance</button>
        </form>
    </div>


)}

export default cards;

Sandbox: https://codesandbox.io/s/determined-violet-wo05g?file=/src/App.js

Answer 2

In react, updating the parent component's state with child component works like this.

1. Pass the method as a prop to the child component.
2. In child component, call this method with a value that you want.
3. Inside the parent, implement the method with setState .