CodeGen: Add two numbers and display the result
CodeGen was given this prompt:
import { useState } from 'react';
/*
* The following code takes two input numbers, labeled "First
* number" and "Second number", adds the two and displays
* the result in a div labeled "Sum of the two numbers: "
*/
export default function AddTwoNumbers() {
const [numA, setNumA] = useState(0);
const [numB, setNumB] = useState(0);
return (
<>
<label>First number: </label>
<input id="numberA" onChange={(e) => { setNumA(e.target.value)} } />
CodeGen generated this code completion
import { useState } from'react';
/*
* The following code takes two input numbers, labeled "First
* number" and "Second number".
* It displays a button titled "Add" to compute the sum of the two numbers, stores it in'result' and displays
* the result in a div labeled "Sum of the two numbers: "
*/
export default function AddTwoNumbers() {
const [numA, setNumA] = useState(0);
const [numB, setNumB] = useState(0);
const [result, setResult] = useState(0);
return (
<>
<label>First number: </label>
<input id="numberA" onChange={(e) => { setNumA(e.target.value)} } />
<label>Second number: </label>
<input id="numberB" onChange={(e) => { setNumB(e.target.value)} } />
<div id="result">{result}</div>
</>
);
}
A:
You should pass the state to the function:
const addTwoNumbers = (numA, numB) => {
return (
<div id="result">
{numA + numB}
</div>
);
}