Creating a calculator with self-refreshing output in react

Question

0.00/5 (No votes)

See more:

, +

I am trying to create a calculator in React, with an output field updating once user inputs one of the values. It has to be within a class.

JavaScript

class CreateProjectAlter extends React.Component {

render() {
    const { classes } = this.props;

    //EBIT
    const initialebitTotalSpend = Number(localStorage.getItem("ebitTotalSpend") || 0);
    const initialebitTotalSpendNewContract = Number(localStorage.getItem("ebitTotalSpendNewContract") || 0);
    const initialebitImpactValue = Number(localStorage.getItem("ebitImpactValue") || 0);
    const initialebitImpactPercentage = Number(localStorage.getItem("ebitImpactPercentage") || 0);
    const initialebitdaDKK = Number(localStorage.getItem("ebitdaDKK") || 0);


     const [ebitTotalSpend, setebitTotalSpend] = useState(initialebitTotalSpend)
     const [ebitTotalSpendNewContract, setebitTotalSpendNewContract] = useState(initialebitTotalSpendNewContract)
     const [ebitImpactValue, setebitImpactValue] = useState(initialebitImpactValue)
    const [ebitImpactPercentage, setebitImpactPercentage] = useState(initialebitImpactPercentage)
    const [ebitdaDKK, setebitdaDKK] = useState(initialebitdaDKK)

    useEffect (() => {
      localStorage.setItem("ebitTotalSpend", ebitTotalSpend)
      localStorage.setItem("ebitTotalSpendNewContract", ebitTotalSpendNewContract)
      localStorage.setItem("ebitImpactValue", ebitImpactValue)
      localStorage.setItem("ebitImpactPercentage", ebitImpactPercentage)
      localStorage.setItem("ebitdaDKK", ebitdaDKK)
    }, [
      ebitTotalSpend, ebitTotalSpendNewContract
    ])  

    let calcebitplusovidkk = (ebitTotalSpend-ebitTotalSpendNewContract)

    return (
      <div>
      
       <Grid item xs={12} md={4} lg={4}>
              <Card>
                <Box p={3}>
                  <CardHeader
                    title="EBIT"
                    align="center"
                    style={{ backgroundColor: "#002B45", color: "white" }}
                  />
                  <TextField
                    id="ebitTotalSpend"
                    value={ebitTotalSpend}
                    label="Total spend / Baseline (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitTotalSpendNewContract"
                    value={ebitTotalSpendNewContract}
                    label="Total spend new contract (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitImpactValue"
                    // value={ebitImpactValue}
                    value={calcebitplusovidkk}          
                    label="Impact (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitImpactPercentage"
                    value={ebitImpactPercentage}
                    onChange={(e) => setebitImpactPercentage(parseInt(e.target.value) || 0)} 
                    label="Impact (%)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitdaDKK"
                    value={ebitdaDKK}
                    label="Ebitda (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                    onChange={(e) => setebitdaDKK(parseInt(e.target.value) || 0)} 

                  />
                </Box>
              </Card>
            </Grid>
            <Grid item xs={12} md={4} lg={4}>
              <Card>
                <Box p={3}>
                  <CardHeader
                    title="EBIT+"
                    align="center"
                    style={{ backgroundColor: "#002B45", color: "white" }}
                  />
                  <TextField
                    id="ebitPlusTotalSpend"
                    label="Total spend / Baseline (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitPlusTotalSpendNewContract"
                    label="Total spend new contract (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitPlusImpactValue"
                    label="Impact (DKK)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    id="ebitPlusImpactPercentage"
                    label="Impact (%)"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                  />
                </Box>
              </Card>
            </Grid>
            
            </div>

What I have tried:

I have been trying to do it using hooks, but I am receiving a following error (invalid hook call).
Does anyone knows how should I proceed with it? Should it be done with hooks, or are there any alternatives?

Posted 27-Sep-21 8:36am

Member 15341738

Updated 27-Sep-21 12:04pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

saiche nouh · Answer 1 · 2021-09-27T11:21:00

Solution 1

the question is not clear , you wanna a calculator that shows an output updated once you update the input ? is that your question?

Posted 27-Sep-21 11:21am

saiche nouh

Comments

Member 15341738 27-Sep-21 17:42pm

That is correct, yes. I am sorry if my question is hard to understand, but english is not my native language.

saiche nouh 27-Sep-21 18:04pm

don't be sorry that's right , why are you using local storage to store the data in the browser ? take a look at that simple example for multiplying and you can get the concept for the others operations (code bellow)

saiche nouh · Answer 2 · 2021-09-27T12:04:00

JavaScript

import "./styles.css";
import {useState} from "react";
export default function App() {
  const [input1 , setInput1] = useState(1);
  const [input2 , setInput2] = useState(1);
  const [output , setOutput] = useState(1);


  return (
    <div className="App">
      <input value={input1} onChange={(event)=>{
        setInput1(event.target.value)
        setOutput(event.target.value * input2)
      }}/>
    <input value={input2} onChange={(event)=>{
        setInput2(event.target.value)
        setOutput(input1 * event.target.value)
      }}/>      

<input value={output}/>
    </div>
  );
}