I have a calculator for finding probabilities of different events given some initial values. The code for the same in React.js is:
//Probability Calculator
const Probability = () => {
const [a, setA] = useState(); //a is the probablity of first event.
const [b, setB] = useState(); // b is the probablity of second event.
const [union, setUnion] = useState(); //P(A | B)
const [aNotOccuring, setaNotOccuring] = useState(null); //P(A')
const [bNotOccuring, setbNotOccuring] = useState(null); //P(B')
const [bothOccuring, setBothOccuring] = useState(null); //P(A & B)
const [onlyAOccurs, setOnlyAOccurs] = useState(null);
const [onlyBOccurs, setOnlyBOccurs] = useState(null);
function reset() {
setaNotOccuring(null);
setbNotOccuring(null);
setBothOccuring(null);
setOnlyAOccurs(null);
setOnlyBOccurs(null);
}
const calcResult = () => {
setaNotOccuring(1 - a);
setbNotOccuring(1 - b);
setBothOccuring(a + b - union);
setOnlyAOccurs(a - bothOccuring);
setOnlyBOccurs(b - bothOccuring)
}
return (
<>
<Form>
<Form.Group className="mb-4">
<Form.Label>Enter the Probablity of First Event</Form.Label>
<Form.Control
onChange={(e) => setA(Number(e.target.value))}
type="number"
value={a === 0 ? "" : a}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Enter the Probablity of Second Event</Form.Label>
<Form.Control
onChange={(e) => setB(Number(e.target.value))}
type="number"
value={b === 0 ? "" : b}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Enter the Probablity of Occurence of either of the events</Form.Label>
<Form.Control
onChange={(e) => setUnion(Number(e.target.value))}
type="number"
value={union === 0 ? "" : union}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Probablity of Non-Occurence of First Event</Form.Label>
<Form.Control
type="number"
disabled="true"
value={aNotOccuring === 0 ? "" : aNotOccuring}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Probablity of Non-Occurence of Second Event</Form.Label>
<Form.Control
type="number"
disabled="true"
value={bNotOccuring === 0 ? "" : bNotOccuring}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Probability of Occurence of Both Events</Form.Label>
<Form.Control
type="number"
disabled="true"
value={bothOccuring === 0 ? "" : bothOccuring}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Probability that only the first event occurs</Form.Label>
<Form.Control
type="number"
disabled="true"
value={onlyAOccurs === 0 ? "" :onlyAOccurs}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Probability that only the second event occurs</Form.Label>
<Form.Control
type="number"
disabled="true"
value={onlyBOccurs === 0 ? "" : onlyBOccurs}
/>
</Form.Group>
</Form>
<div className="button-custom-grp">
<Button variant="primary" onClick={calcResult}>
Calculate
</Button>
<Button variant="dark" onClick={() => reset()} type="reset">
Reset
</Button>
</div>
</>);
}
When I set the values for P(A)=0.4: Probability of first event , P(B)=0.3: probability of Second Event and P(A U B)=0.5: Probability of Union of both events.
Upon clicking on the calculate button, the bothOccuring variable gives value of 0.2000004 against the correct value of 0.2.A similar thing happens for other values.
