I've looked on here, and people have recommended that I store a boolean in state to conditionally render it later on, however, when showTable is set to true, everything disappears.
Here is my code that is being rendered into app
compoundInterest.js
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import InputAdornment from '@material-ui/core/InputAdornment';
import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import DataTable from './DataTable';
function createData(key, term, balance) {
return { key, term, balance };
}
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
function CompoundInterest() {
const [state, setState] = useState({ interestRate: 0.01, Balance: 0, Year: 1, Compounds: 1, currency: '£', showComponent: false });
const [show, setShow] = useState({ showTable: false });
let rows = [];
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.value });
};
const classes = useStyles();
const calculate = (e) => {
let balance = state.Balance;
let rate = state.interestRate;
let time = state.Year;
let Compounds = state.Compounds;
let A = 0;
rows = [];
for (let i = 1; i <= Compounds * time; i++) {
A = (balance * (1 + (rate / 100)));
balance = A;
rows.push(createData(`${i}`, `Compound term ${i}`, Math.round(balance * 100) / 100));
}
setShow({ showTable: true });
};
return (
<div >
<form className={classes.root} noValidate>
<FormControl component="fieldset">
<FormLabel component="legend">Currency</FormLabel>
<RadioGroup aria-label="currency" name="currency" value={state.currency} onChange={handleChange} row>
<FormControlLabel value="£" control={<Radio />} label="£" />
<FormControlLabel value="$" control={<Radio />} label="$" />
<FormControlLabel value="€" control={<Radio />} label="€" />
<FormControlLabel value="¥" control={<Radio />} label="¥" />
</RadioGroup>
</FormControl>
<InputLabel>Amount
<Input id="standard-basic-amount"
name='Balance'
onChange={handleChange}
type="number"
value={state.Balance}
startAdornment={<InputAdornment position="start">{state.currency}</InputAdornment>} />
</InputLabel>
<InputLabel>Interest rate
<Input id="standard-basic-rate"
name='interestRate'
onChange={handleChange}
type="number"
value={state.interestRate}
endAdornment={<InputAdornment position="start">%</InputAdornment>} />
</InputLabel>
<InputLabel>Year(s)
<Input id="standard-basic-time"
name='Year'
onChange={handleChange}
type="number"
value={state.Year}
/>
</InputLabel>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Compound Term</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={state.Compounds}
label="Compound term"
onChange={handleChange}
name="Compounds"
>
<MenuItem value={1}>Yearly</MenuItem>
<MenuItem value={2}>Bi-annually</MenuItem>
<MenuItem value={4}>Quaterly</MenuItem>
<MenuItem value={12}>Monthly</MenuItem>
<MenuItem value={52}>Weekly</MenuItem>
<MenuItem value={365}>Daily</MenuItem>
</Select>
</FormControl>
<Button
variant="contained"
color="primary"
className={classes.button}
startIcon={<MonetizationOnIcon />}
onClick={calculate}
>
</Button>
</form>
<div> {show.showTable ? <DataTable rows={rows} /> : null}</div>
</div>
);
}
export default CompoundInterest;
Here is my Datatable.js component which has the actual material-ui table
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));
export default function DataTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Compund Term</StyledTableCell>
<StyledTableCell align="right">Balance</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.rows.map((row) => (
<StyledTableRow key={row.key}>
<StyledTableCell component="th" scope="row">
{row.term}
</StyledTableCell>
<StyledTableCell align="right">{row.balance}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
