Блог

У меня есть приложение, которое позволяет мне добавлять список клиентов по вводимым данным. У меня также есть другой компонент, который позволяет мне выбрать один из существующих клиентов из выпадающего меню и создать с ними «новый урок». Таким образом, я могу регистрировать свои уроки, выполненные с моими клиентами. Все это работает отлично… вот где я застрял.

Каждый раз, когда я добавляю новый урок, я хочу взять продолжительность урока (в часах) и умножить это на цену соответствующего клиента. Затем я хочу иметь возможность отображать эту прибыль, и каждый раз, когда я добавляю новый урок с новой прибылью, я хочу, чтобы все это составляло общую прибыль от всех уроков.

Это App.js

 import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'
import CalculateIncome from './components/CalculateIncome'

class App extends Component {
  state = {
    clients : [
      // {id : null , name : '', price : null}
    ],
    lessons : [
      // {id: null, name: '', time: null, date :null}
    ],
  }

  deleteClient = (id) => {
    let clients = this.state.clients.filter(client => {
      return client.id !== id
    })
    this.setState({
      clients: clients
    })
  }

  addClient = (newClient) => {
    newClient.id = Math.random();
    let clients = [...this.state.clients, newClient];
    clients.sort((a, b) => a.name.localeCompare(b.name))
    this.setState({
        clients: clients,
    })
  }

  addLesson = (newLesson) => {
    newLesson.id = Math.random();
    newLesson.date = Date();
    let lessons = [...this.state.lessons, newLesson];
    this.setState({
        lessons: lessons,
    })
  }

  render() {
    return (
      <div className="App">
        <NavBar/>
        <Clients clients={this.state.clients} deleteClient={this.deleteClient} lessons={this.state.lessons}/>
        <AddClient addClient={this.addClient}/>
        <AddLesson addLesson={this.addLesson} lessons={this.state.lessons} clients={this.state.clients} income={this.state.income} />
        <CalculateIncome lessons={this.state.lessons} clients={this.state.clients}/>
      </div>
    );
  }
}

export default App;
  

Это CalculateIncome.js

 import React, {Component} from 'react'

class CalculateIncome extends Component {
        state = {
            totalIncome:0
        }

        calculation = () => {
            this.props.lessons.filter(lesson => {
                this.props.clients.filter(client => {
                    if (client.name === lesson.name){
                        let price = client.price
                        let time = lesson.time
                        return(price, time)
                    }
                    return (
                        this.setState({
                            totalIncome : (price * time)
                        })
                    )
                })       
            })
        }

        render() {
            return ( this.props.lessons.length ? 
            (this.state.totalIncome)  
                : 
            (<div className="text-center my-5">You are broke</div>) 
        )
    }
}

export default CalculateIncome
  

Если вам нужно увидеть какие-либо другие компоненты, включая AddLesson.js и Clients.js пожалуйста, дайте мне знать, я также опубликую это.