task.tsx

import React, { useState } from 'react';

interface Param {
    name: string;
    value: string;
}

interface Model {
    params: Param[];
}

interface EditableParamProps {
    param: Param;
    onChange: (name: string, value: string) => void;
}

const EditableParam: React.FC<EditableParamProps> = ({ param, onChange }) => {
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        onChange(name, value);
    };

    return (
        <div>
            <label>{param.name}</label>
            <input
                type="text"
                name={param.name}
                value={param.value}
                onChange={handleInputChange}
            />
        </div>
    );
};

interface ModelEditorProps {
    model: Model;
}

const ModelEditor: React.FC<ModelEditorProps> = ({ model }) => {
    const [params, setParams] = useState<Param[]>(model.params);

    const handleParamChange = (name: string, value: string) => {
        const updatedParams = params.map(param => {
            if (param.name === name) {
                return { ...param, value };
            }
            return param;
        });
        setParams(updatedParams);
    };

    const getModel = () => {
        console.log(params)
        return { params };
    };

    return (
        <div>
            {params.map(param => (
                <EditableParam
                    key={param.name}
                    param={param}
                    onChange={handleParamChange}
                />
            ))}
            <button onClick={getModel}>Get Model</button>
        </div>
    );
};

const initialModel = {
    params: [
        { name: 'param1', value: 'value 1' },
        { name: 'param2', value: 'value 2' },
        { name: 'param3', value: 'value 3' },
    ],
};

const App: React.FC = () => {
    return (
        <div>
            <ModelEditor model={initialModel} />
        </div>
    );
};

export default App;