Ggtcf

I have an app that allows me to add a list of clients by input. I also have a another component that allows me to choose one of the existing clients from a dropdown menu and create a 'new lesson' with them. This way I can log my lessons done with my clients. This all works perfectly... this is where I get stuck.

Everytime I add a new lesson, I want to take the duration of the lesson (in hours) and multiply that by the corresponding client's price. I then want to be able to display that profit and everytime I add a new lesson with a new profit, I want it all to add up to a totalProfit of all the lessons.

This is 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;

This is 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

If you need to see any other components including AddLesson.js and Clients.js please let me know I will post it up as well.