Ufdjrw

Just to start, I am a beginner in React so I am trying to get the hang of passing props and placing different functions in different components. I have been stuck on this all day trying to figure it out.

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.

I have different components that I will post here so you can take a look, I'm trying to figure out how to do that calculation but I think I am not passing down props and using functions correctly. Thanks for the help!

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;

Here is my addLesson.js

import React, Component from 'react'

class AddLesson extends Component 
 state = 
 id: null, name: null, time: null, date : null
 

 handleChange = (e) => 
 this.setState(
 [e.target.id] : e.target.value,
 )
 console.log([e.target.id]);
 

 handleSubmit = (e) => 
 e.preventDefault();
 this.props.addLesson(this.state);
 e.target.reset();
 


 render() 
 return (
 <div className="text-center mt-5">
 <h2>Add a lesson</h2>
 <form onSubmit=this.handleSubmit>
 <label htmlFor="name">Client Name: </label>
 <select onChange=(e) => this.handleChange(e) id="name">
 <option value=""></option>
 this.props.clients.map(client => 
 <option key=client.id value=client.name.value>
 client.name
 </option>
 )
 </select>
 <br/>
 <label htmlFor="time">Lesson Duration (in hours): </label>
 <input type="text" id="time" onChange=this.handleChange/><br/>
 <button className="btn btn-primary">Add Lesson</button> 
 </form>
 </div>
 )
 


export default AddLesson

Here is my clients.js

import React from 'react'

const Clients = (clients, deleteClient, lessons) => 
 const clientList = clients.map(client =>
 return ( 
 <div className="container" key=client.id>
 <ul className="clientInfo">
 <li className="py-3">
 <span className="name">Client Name: client.name</span>
 <span className="price pl-3 pr-5">Client Price: client.price</span>
 <button className="btn btn-danger" onClick=() => deleteClient(client.id)>X</button>
 </li>
 </ul>
 </div>
 )
 )
 const lessonList = lessons.map(lesson =>
 return (
 <div className="container" key=lesson.id>
 <ul className="lessonInfo">
 <li className="py-1">
 <span className="name">Lesson Name: lesson.name</span>
 <span className="price pl-3 pr-3">Lesson Time(in hours): lesson.time</span>
 <span className="date">Lesson Added: lesson.date</span>
 </li>
 </ul>
 </div>
 )
 )
 return(
 <div className="container text-center">
 <h2>Here are your current clients...</h2>
 clientList
 <h2>Here is the list of lessons so far</h2>
 lessonList
 </div>
 )


export default Clients

and lastly, here is the CalculateIncome.js that I am working on, should it even be class based?

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

I think the issue is the way you have pass state values from App.js to CalculateIncome.js. So try to pass those state values like this.

class App extends Components
 constructor(props)
 super(props)
 this.state=
 lessons: 'Any value 1'
 clients: 'Any value 2'
 
 this.passLessonValue=this.passLessonValue.bind(this)
 this.passClientValue=this.passClientValue.bind(this)
 
 passLessonValue()
 return this.state.lessons
 
 passClientValue()
 return this.state.client
 

 render()
 return(
 <Calculate passLesson=this.passLessonValue
 passClient=this.passClientValue/>
 )
 
 

You must write functions which returns state values. And after that just pass those functions to Calculator.js by using props.
I ll show u how to use those functions in Calculator.js

class Calculator extends Components
 constructor(props)
 super(props)
 this.state= 
 lesson1: null
 client1 null

 
 this.setLessonValue=this.setLessonValue.bind(this)
 this.setClientValue=this.setClientValue.bind(this)
 
 async setLessonValue()
 await const val=this.props.passLesson()
 this.setState(
 lesson1: val
 )
 
 async setClientValue()
 await const val2=this.props.passClient
 this.setState(
 client1: val2
 )
 
 

So inside Calculator.js you must set state values. After that u must call a function and inside that function assign the props which was sent from App.js to a variable "val".(cuz props returns state value)After that set the state value of Calculator.js using the variable "val"