Verwaltung dynamischer Raster-Eingaben mit gecurryten Event-Handler-Funktionen

import React, { useState } from 'react';
 
export function MatrixEditor({ rows, cols }) {
  const [grid, setGrid] = useState(() =>
    Array.from({ length: rows }, () => Array(cols).fill(''))
  );
 
  const handleCellChange = (rowIndex, colIndex) => (event) => {
    const nextValue = event.target.value;
    setGrid((prevGrid) =>
      prevGrid.map((row, r) =>
        r === rowIndex
          ? row.map((cell, c) => (c === colIndex ? nextValue : cell))
          : row
      )
    );
  };
 
  return (
    <div className="matrix-grid">
      {grid.map((row, r) => (
        <div key={r} className="matrix-row">
          {row.map((val, c) => (
            <input
              key={`${r}-${c}`}
              value={val}
              onChange={handleCellChange(r, c)}
            />
          ))}
        </div>
      ))}
    </div>
  );
}