Hey all, so I am making a tax calculator and need some help, I know I can add it all to the App.js file, but I want to keep the else if method on a different page.
So I have the App.js file, from create-react-app as per below
/* eslint-disable no-unused-vars */
import React, {Component} from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputGroup, InputGroupAddon, Input, Button } from 'reactstrap';
import {taxTable} from './tax'
class App extends Component {
constructor(props) {
super(props)
this.state = {taxEarning: ''}
}
taxEarning = '';
handleInput = event => {
this.setState({taxEarning: event.target.value})
let taxEarning = Math.floor(this.state.taxEarning) * 12
console.log(`Taxable earning is: ${taxEarning}`)
}
render() {
return (
<div className="App container">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossOrigin="anonymous"
/>
<h1 className="jumbotron jumbotron-fluid">Welcome to Tax Calc</h1>
<h3 className="alert alert-secondary" role="alert">Use the below form to calculate your monthly tax payable on your salary</h3>
<p className="instructions">Please enter your monthly salary into the form below</p>
<br />
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">R</InputGroupAddon>
<Input
placeholder="Amount"
type="number"
value={this.state.taxEarning}
onChange={this.handleInput}
/>
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
<br />
<Button
color="primary"
onClick={this.handleInput}
value={this.state.taxEarning}
>Submit</Button>
<br />
<br />
<p className="instructions">Tax payable is: R{}</p>
</div>
)};
}
export default App;
and I have imported the tax else if table into the App.js file, which looks like this:
/* eslint-disable no-undef */
function taxTable(taxEarning) {
taxableIncome = 0
if (taxEarning <= 195850) {
taxableIncome = Math.floor(taxEarning * 0.18)
} else if (taxEarning >= 195851 && taxEarning <= 305850) {
taxableIncome = Math.floor(taxEarning * 0.26 - 35253)
} else if (taxEarning >= 305851 && taxEarning <= 423300) {
taxableIncome = Math.floor(taxEarning * 0.31 - 63853)
} else if (taxEarning >= 423301 && taxEarning <= 555600) {
taxableIncome = Math.floor(taxEarning * 0.36 - 100263)
} else if (taxEarning >= 555601 && taxEarning <= 708310) {
taxableIncome = Math.floor(taxEarning * 0.39 - 147891)
} else if (taxEarning >= 708311 && taxEarning <= 1500000) {
taxableIncome = Math.floor(taxEarning * 0.41 - 207448)
} else if (taxEarning >= 1500001) {
taxableIncome = Math.floor(taxEarning * 0.45 - 532041)
}
return ((Math.floor(taxEarning) - taxableIncome)/12).toFixed(2)
}
module.exports = taxTable
Though now, I want to take the user input and have it check the taxTable() with the taxEarning for the appropriate method and run that method and then return the output as per the module.
Can someone help me with this please