iddan / react-spreadsheet

Simple, customizable yet performant spreadsheet for React
https://iddan.github.io/react-spreadsheet
MIT License
1.34k stars 157 forks source link

Getting Started example just doesn't work #370

Closed Bijig0 closed 10 months ago

Bijig0 commented 11 months ago

This code is just wrong??

https://iddan.github.io/react-spreadsheet/docs/usage#controlled

import Spreadsheet from "react-spreadsheet";

const App = () => {
  const [data, setData] = useState([
    [{ value: "Vanilla" }, { value: "Chocolate" }, { value: "" }],
    [{ value: "Strawberry" }, { value: "Cookies" }, { value: "" }],
  ]);
  return <Spreadsheet data={data}
  onChange={
    const t = d.map(row => [...row]);
    for (let i = 0; i < 3; i++) {
      const string = d[i][1]
      if(string.value === 'Chocolate'){
        t[i][2] = {value:"🍫"}
      }
      else if(string.value === "Cookies"){
        t[i][2] = {value:"🍪"}
      }
      else if(string.value === "Pizza"){
        t[i][2] = {value:"🍕"}
      }
      else {
        t[i][2] = {value:"❓"}
      }
    }
    setData(t)
  } />;
};

I tried wrapping everything in a handleChange and my app still crashes when I try to make an edit to any cell.

  const handleChange = (d) => {
    const t = d.map((row) => [...row]);
    for (let i = 0; i < 3; i++) {
      const string = d[i][1];
      if (string.value === "Chocolate") {
        t[i][2] = { value: "🍫" };
      } else if (string.value === "Cookies") {
        t[i][2] = { value: "🍪" };
      } else if (string.value === "Pizza") {
        t[i][2] = { value: "🍕" };
      } else {
        t[i][2] = { value: "❓" };
      }
    }
    setData(t);
  };
  return <Spreadsheet data={data} onChange={handleChange} />;
iddan commented 10 months ago

Thank you for pointing that out, fixing it...

iddan commented 10 months ago

Done!