Yo.

Making a tip calculator for a udemy course challenge.

This is my code

import React, { useState } from "react";

import "./App.css";
import Bill from "./Bill.js";
import ServiceInput from "./ServiceInput.js";
import TotalPrice from "./TotalPrice.js";
function App() {
  const [bill, setBill] = useState(0);
  const [serviceSatisfaction, setServiceSatisfaction] = useState(0);
  const [serviceSatisfaction2, setServiceSatisfaction2] = useState(0);
  const totalServiceSatisfaction = serviceSatisfaction + serviceSatisfaction2;
  console.log(serviceSatisfaction);
  console.log(bill);
  return (
    <div className="App">
      <Bill bill={bill} setBildfl={setBill} />
      <ServiceInput
        setBill={setBill}
        setServiceSatisfactions={setServiceSatisfaction}
      />
      <ServiceInput
        bill={bill}
        setServiceSatisfactions={setServiceSatisfaction2}
      />
      <TotalPrice bill={bill} serviceSatisfaction={totalServiceSatisfaction} />
    </div>
  );
}

export default App;
import React, { useState } from "react";

function Bill({ bill, setBill }) {
  return (
    <div>
      <span>
        <h2>How much was the bill?</h2>
        <input
          type="number"
          value={bill}
          onChange={(e) => setBill(parseFloat(e.target.value)) || 0}
          placeholder="Enter bill amount"
        />
      </span>
    </div>
  );
}
export default Bill;
import React, { useState } from "react";

function ServiceInput({
  bill,
  setBill,
  serviceSatisfaction,
  setServiceSatisfactions,
}) {
  const handleServiceChange = (event) => {
    const value = parseFloat(event.target.value);
    if (!isNaN(value)) {
      setServiceSatisfactions((bill * value) / 100);
    } else {
      setServiceSatisfactions(0);
    }
  };
  return (
    <div>
      <h2>How did you like the service? </h2>
      <select onChange={handleServiceChange}>
        <option value={bill * 1.05}>it was ok 5%</option>
        <option value={bill * 1.1}>it was decent 10%</option>
        <option value={bill * 1.2}>it was good 20%</option>
      </select>
    </div>
  );
}
export default ServiceInput;
import React, { useState } from "react";

function TotalPrice({ bill, serviceSatisfaction }) {
  return (
    <span>
      <h2>You pay</h2>
      <h2>{bill + serviceSatisfaction}</h2>
    </span>
  );
}
export default TotalPrice;

and the dynamic stuff just isn’t working, also i want to change the second instance of serviceSatisfaction the header to be “how did your friend like the service?” instead, plus also both of the percentages should affect the same total.