bad-input.jsx

// Build a react component that allows a cashier to change a value into several coins. 
// Show 10 posibilities of changing the amount of money.

import React, { useState } from 'react';

function CoinChanger() {
    const [amount, setAmount] = useState('');
    const [combinations, setCombinations] = useState([]);

    const coins = [25, 10, 5, 1]; // quarters, dimes, nickels, pennies

    function findCombinations(target, currentCombination, start, allCombinations) {
        if (target === 0) {
            allCombinations.push([...currentCombination]);
            return;
        }
        if (target < 0 || allCombinations.length >= 10) {
            return;
        }

        for (let i = start; i < coins.length; i++) {
            currentCombination.push(coins[i]);
            findCombinations(target - coins[i], currentCombination, i, allCombinations);
            currentCombination.pop();
        }
    }

    function handleChange(event) {
        setAmount(event.target.value);
    }

    function handleSubmit() {
        const allCombinations = [];
        findCombinations(parseInt(amount), [], 0, allCombinations);
        setCombinations(allCombinations);
    }

    return (
        <div>
            <h1>Coin Changer</h1>
            <input type="number" value={amount} onChange={handleChange} placeholder="Enter amount in cents" />
            <button onClick={handleSubmit}>Calculate Combinations</button>
            <div>
                {combinations.map((combo, index) => (
                    <div key={index}>
                        {`Combination ${index + 1}: ` + combo.map(coin => `${coin}¢`).join(', ')}
                    </div>
                ))}
            </div>
        </div>
    );
}

export default CoinChanger;

coinchange-good.jsx

// Being an expert Software Frontend engineer, You had a lot of knowledge about react and it's functions,  
// you know all the best practices and know about efficient algorithms. 

// Think about caching responses like using memo, and make sure that if the user inputs the same value again, 
// the calculation is not redo, and be proactive in suggesting and
// implementing more improvements like posible validations or errors

// Please be clear and try to do everything as perfomant as possible. 

// The task is to build: 
// Build a react component that allows a cashier to change a value into several coins. 
// Show 10 posibilities of changing the amount of money that is given via the UI.

// Make sure that the component is rendered correctly and make sure the component works
import React, { useState, useMemo } from 'react';

const CoinChanger = () => {
    const [amount, setAmount] = useState('');
    const [combinations, setCombinations] = useState([]);
    const [error, setError] = useState('');
    const coins = [100, 50, 25, 10, 5, 1]; // denominations in cents

    const calculateChange = (amount, current = [], start = 0) => {
        let results = [];
        if (amount === 0) {
            results.push(current);
            return results;
        }
        if (results.length >= 10) return results; // limit results to 10

        for (let i = start; i < coins.length; i++) {
            if (coins[i] <= amount) {
                const nextResults = calculateChange(amount - coins[i], [...current, coins[i]], i);
                results = [...results, ...nextResults];
                if (results.length >= 10) break;
            }
        }
        return results.slice(0, 10);
    };

    const memoizedCombinations = useMemo(() => {
        if (amount) {
            const numAmount = Number(amount);
            if (numAmount > 0 && Number.isInteger(numAmount)) {
                setError('');
                return calculateChange(numAmount);
            } else {
                setError('Please enter a valid positive integer.');
                return [];
            }
        }
        return [];
    }, [amount]);

    const handleInputChange = (event) => {
        setAmount(event.target.value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        setCombinations(memoizedCombinations);
    };

    return (
        <div>
            <h1>Coin Change Calculator</h1>
            <form onSubmit={handleSubmit}>
                <input 
                    type="number" 
                    value={amount} 
                    onChange={handleInputChange} 
                    placeholder="Enter the amount in cents"
                />
                <button type="submit">Calculate</button>
            </form>
            {error && <p className="error">{error}</p>}
            <ul>
                {combinations.map((combo, index) => (
                    <li key={index}>{`Combination ${index + 1}: ${combo.join(", ")}`}</li>
                ))}
            </ul>
        </div>
    );
};

export default CoinChanger;