KarthikBacherao.com

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>
    );
}