Build a Mini Spreadsheet (Excel)

Question

Accepted Answer

## Building a Mini Spreadsheet in React

**Mental model:** Store *raw* cell text in a map keyed by `A1`-style ids. A cell's *displayed* value is computed: plain text/number as-is, or — if it starts with `=` — evaluate the formula by recursively resolving any cell references it contains. Guard against reference cycles with a visited set.

### Step 1 — Raw map + editing cell
```jsx
const [raw, setRaw] = useState({ A1: '10', B1: '20', C1: '=A1+B1' });
const [editing, setEditing] = useState(null);
```

### Step 2 — Recursive evaluation
Replace each `A1` reference with its evaluated value, then evaluate the arithmetic.

```jsx
const evalCell = (id, seen = new Set()) => {
  if (seen.has(id)) return '#CYCLE';
  const v = raw[id] || '';
  if (!v.startsWith('=')) return v;
  const expr = v.slice(1).replace(/[A-Z]+[0-9]+/g, (ref) => evalCell(ref, new Set([...seen, id])));
  return safeEval(expr);
};
```

### Step 3 — Safe arithmetic only
Whitelist characters before evaluating so a formula can't

Build a Mini Spreadsheet (Excel)

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)