Passing Data to other components

[sbelka1703]

This is a tip calculator that I am trying to build using Rect

I am having trouble bringing out totalValue in the Form component, to have that value displayed or to use it in another component (DisplayBill). What is the best practice, when it comes to that? I tried using a useState hook, but it doesn’t seem to work.

Higher-level summary:
I have a functional component, called Form and I have a function tipHandler that gets triggered when I press the calculate button. I am trying to extract values from that tipHandler function and I think I am running into scope issues

Here is the code:

//App.js

import React, {useState} from 'react';

import Form from "./components/Form";




function App() {

  const [inputValue, setInputValue] = useState('')
  const [customTipValue, setCustomTipValue] = useState('')
  const [formKey, setFormKey] = useState(0)


  


 

  return (
    <div>
      

      <h5>Tip Calculator </h5>


      <Form 
      key={formKey} 
      setInputValue={setInputValue} 
      inputValue= {inputValue} 
      customTipValue={customTipValue} 
      setCustomTipValue = {setCustomTipValue}
      formKey = {formKey}
      setFormKey = {setFormKey}
      /> 

 
    </div>
  );
}

export default App;

//Form.js

import './style.css'

import DisplayBill from "./DisplayBill";
import React, {useState} from 'react';








const Form = (props) => {


    const [totalAmount, setTotalAmount] = useState('')
    let initialAmount = props.inputValue
    let percentage = 0
    var tip 

    

    const tipHandler = () => {
    

        //If user presses the percent button instead of entering custum tip 
        if (props.customTipValue === "") {
            
            var decimal = percentage / 100
            tip = initialAmount * decimal
            
        }
    
        //If user enters the custom tip amount in USD
        else {
            var tip = props.customTipValue
            props.setCustomTipValue('')
        }

        //I am trying to pass this value(totalValue) to the DisplayBill component or just render it in Form.js
        let totalValue = parseInt(tip) + parseInt (initialAmount)
        //
        console.log(totalValue)



        setTotalAmount(totalValue)

        console.log(totalAmount)

        

        
        

        props.setFormKey(props.formKey + 1)
    }
    let totalValue = parseInt(tip) + parseInt (initialAmount)
    

     const inputBillHandler = (e) => {
        props.setInputValue(e.target.value)
    }

    const inputCustomTipHandler = (e) => {
        props.setCustomTipValue(e.target.value)
    }
    

    







    

    return (
        <>



            <label htmlFor="bill-amount" className="bill-amount-label">Bill Amount</label>
            <input onChange={inputBillHandler} id='bill-amount' placeholder="$" />

            <h3 id="select-tip-text"> Select your Tip:</h3>


            <button className="percent-button" type="button" onClick={() => percentage = 15} >15%</button>
            <button className="percent-button" type="button" onClick={() => percentage = 20} >20%</button>
            <button className="percent-button" type="button" onClick={() => percentage = 25} >25%</button>

            <input onChange={inputCustomTipHandler} id='Custom-tip' placeholder="Custom tip($)" type="number" />

            <button onClick={tipHandler} id='Calculate-button'>Calculate</button>

            <DisplayBill 
            tipHandler = {tipHandler}
            totalAmount = {totalValue}

             /> 
             
             <div>
                 {totalValue}
             </div>
             
            



        </>

    )}



export default Form;

//DisplayBill.js
const DisplayBill = (props) => {



    
    
    
    
    return(
        <div className = "total-div">
            {props.totalAmount}
        </div>
    )

}




export default DisplayBill;

//style.css

body {
    text-align: center;
    background-color: #290b5a;
}

h5 {
    color: floralwhite;
    font-size: 2.5em;
}

label {
    color: rgb(255, 255, 255);
}

.total-div {
    color: floralwhite;
    font-size: 2.5em;
}

.bill-amount-label {
    font-size: 1.5em;
}

#bill-amount {
    padding: 8px;
    margin: 1px 0;
    border: 3px solid white;
    border-radius: 8px;
    width: 10%;
    box-sizing: border-box;
    transition: .1s;
}

#bill-amount, select, textarea {
    font-size: 1.3em;
    font-weight: bold;
    color: rgb(29, 29, 29)
}

#bill-amount:focus {
    border: 3px solid rgb(173, 6, 250);
    box-shadow: 0 0 8px 0 gb(173, 6, 250);
    outline: none;
}

#select-tip-text {
    color: floralwhite;
    font-size: larger;
}

#user-error {
    color: rgb(232, 248, 10);
    font-size: larger;
}

.percent-button {
    margin: .001em;
    padding: 12px;
    font-size: 1.3em;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid rgba(112, 111, 211, 0);
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}

.percent-button:focus {
    color: rgba(53, 240, 208);
    border: 2px solid rgba(53, 240, 208, 1);
    box-shadow: 0px 0px 0px 1px rgba(53, 240, 208, 1);
}

#Custom-tip {
    padding: 17px;
    margin: 1px 0;
    border: 2px solid rgb(173, 6, 250);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    width: 8%;
}

#Custom-tip:focus {
    outline: none;
}

#Calculate-button {
    margin: .001em;
    padding: 16px;
    width: 12%;
    font-size: 1.3em;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid rgba(112, 111, 211, 0);
    border-radius: 15px;
    cursor: pointer;
    outline: none;
}

#Calculate-button:focus {
    color: rgba(53, 240, 208);
    border: 2px solid rgba(53, 240, 208, 1);
    box-shadow: 0px 0px 0px 1px rgba(53, 240, 208, 1);
}

#Calculate-button:hover {
    transition: transform 190ms;
    transform: translateY(-3px);
}