On updating data prop, app crashes with error "Cannot read property '0' of undefined"

When updating the data prop of the crossword the, the app crashes and return error Cannot read property '0' of undefined.

Why I need to update data props ? I want to update the clue with check icon `onCorrect’.

Implementation snippet

import React from "react";
import Crossword from "@jaredreisinger/react-crossword";

import { initialData } from "../utils/crossword";

function Play() {
  const [data, setData] = React.useState(initialData);

  const onCorrect = (...values) => {
    try {
      const [direction, number, answer] = values;
      const newData = { ...data };
      newData[direction][number].clue = newData[direction][number].clue + " ✅";
      setData(newData);
    } catch (error) {
      console.log(error);
    }
  };

  return (
      <Crossword
        data={data}
        onCorrect={onCorrect}
      />
  );
}

export default Play;

If data props should not be updated, please mention that and I will close the issue.

Thanks.

[JaredReisinger]

The component should handle having the data prop updated (any React component should deal with props getting updated, after all!), but I think we can find a better solution for your particular use case, since you’re not really changing the crossword as a whole, you’re just trying to get some additional context-sensitive styling in place.

How about if I add a class name to clues that have been answered correctly? They currently have a clue class, but it should be easy to add correct once they’ve been answered. Then, you can add CSS (either for your app as a whole, or scoped to the Crossword using something like styled-component) so that you can have:

.clue.correct::before {
  content: "\2705 ";  /* show check mark before correctly answered clues */
}

… and not have to do any prop changing (which requires the component to recalculate the entire puzzle).

[dreamer01]

Thanks @JaredReisinger, this is great. Just what I was looking for.