React JS creating percentage chart - reactjs

Question

I'm working on creating a chart that will show set percentages of a user-inputted number. For example the user enters "200" and the chart would show "100% = 200, 95% = 190, etc.". The percentages on the chart will stay the same, it'll be just the input number and the percentage results that will change. hopefully that makes sense.
Here is the code for the chart:
import React, { useState } from 'react';
const issStyles = {
chart: {
display: 'flex',
flexDirection: 'row',
margin: '20px',
},
percentBox: {
background: '#E7E7E7',
borderRadius: '10px',
padding: '5px',
display: 'flex',
justifyContent: 'center',
width: '200px',
fontSize: '24px',
},
percentResultBox: {
background: '#E7E7E7',
borderRadius: '10px',
padding: '5px',
display: 'flex',
justifyContent: 'center',
width: '200px',
fontSize: '24px',
},
line: {
padding: '5px',
justifyContent: 'center',
fontSize: '24px',
},
}
export default function PercentChart(props) {
const [ percent ] = useState(props.percent)
const [ percentResult ] = useState(props.percentResult)
return (
<div style={issStyles.chart}>
<div style={issStyles.percentBox}>
{percent}
</div>
<div style={issStyles.line}>
----------
</div>
<div style={issStyles.percentResultBox}>
{percentResult}
</div>
</div>
)
};
Here is the code for the page it is being called in:
import React from 'react';
import HeaderButton from '../../components/HeaderButton';
import PercentChart from '../../components/PercentChart';
const issStyles = {
PRNumber: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: '20px',
fontFamily: 'PT Sans Caption',
fontSize: '18px',
},
Space: {
margin: '10px',
},
PRChart: {
background: '#C4C4C4',
width: '80%',
borderRadius: '10px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
margin: '0 auto',
},
};
export default function PercentPage() {
return (
<div>
<HeaderButton exerciseName="Movement 1" />
<div style={issStyles.PRNumber}>
PR:
<input type="number" placeholder="Enter current PR" style={issStyles.Space}/>
</div>
<div style={issStyles.PRChart}>
<PercentChart percent="100%" percentResult="100"/>
<PercentChart percent="95%" percentResult="95"/>
<PercentChart percent="90%" percentResult="90"/>
<PercentChart percent="85%" percentResult="85"/>
<PercentChart percent="80%" percentResult="80"/>
<PercentChart percent="75%" percentResult="75"/>
<PercentChart percent="70%" percentResult="70"/>
<PercentChart percent="65%" percentResult="65"/>
<PercentChart percent="60%" percentResult="60"/>
<PercentChart percent="55%" percentResult="55"/>
</div>
</div>
);
};
Here is a screenshot of what the page currently looks like:
Basically, what I want to happen is the user would enter a number in the "Enter current PR" input field, and the numbers on the right of the chart would automatically update to whatever is the corresponding percentage of that number. I know right now I have the numbers hard coded and not associated with the input field at all, and that's what I need help on mainly. I'm new to coding so any additional tips/corrections would be wonderful. Thank you!

Answer 1

Runnable Code Snippet
const { useEffect, useState } = React;
const { Container, Table, Form } = ReactBootstrap;
function App() {
const [pr, setPr] = useState(100);
const [levels, setLevels] = useState([]);
useEffect(() => {
const arr = [];
let percentage = 100;
while (percentage > 0) {
arr.push([percentage, (pr * percentage) / 100]);
percentage -= 5;
}
setLevels(arr);
}, [pr]);
return (
<Container>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>PR</Form.Label>
<Form.Control
type="input"
placeholder="100"
value={pr}
onChange={(e) => setPr(e.target.value)}
/>
</Form.Group>
</Form>
<Table striped bordered hover>
<thead>
<tr>
<th>Percent</th>
<th>Result</th>
</tr>
</thead>
<tbody>
{levels.map((level) => (
<tr key={level[0]}>
<td>{level[0]}%</td>
<td>{level[1]}</td>
</tr>
))}
</tbody>
</Table>
</Container>
);
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="react"></div>
Example Code Before Mangling for Snippet
import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import Form from "react-bootstrap/Form";
export default function App() {
const [pr, setPr] = useState(100);
const [levels, setLevels] = useState([]);
useEffect(() => {
const arr = [];
let percentage = 100;
while (percentage > 0) {
arr.push([percentage, (pr * percentage) / 100]);
percentage -= 5;
}
setLevels(arr);
}, [pr]);
return (
<Container>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>PR</Form.Label>
<Form.Control
type="input"
placeholder="100"
value={pr}
onChange={(e) => setPr(e.target.value)}
/>
</Form.Group>
</Form>
<Table striped bordered hover>
<thead>
<tr>
<th>Percent</th>
<th>Result</th>
</tr>
</thead>
<tbody>
{levels.map((level) => (
<tr key={level[0]}>
<td>{level[0]}%</td>
<td>{level[1]}</td>
</tr>
))}
</tbody>
</Table>
</Container>
);
}
I used React Bootstrap for formatting. The idea is you have the form field for the user to enter a number. When it changes, the onEffect fires and parses the input. Then it calculates the percentages and places them in an array. The array is set as the "levels" and we use the map method to render the table.