4z Posts - Answer Overflow

•Created by 4z on 10/24/2024 in #questions

React UseState interface and eslint - am I doing this right?

eslint no-unused-vars rule is failing on the variables in the interfaces for my react components. I have n-number of components and I manage their state from the parent component, so I declare an interface in the component and pass the useState from the parent component to the child component using props. Each component starts with an interface declaration like so

interface createCategoryModalProps {
  showCreateCategoryModal: boolean;
  setShowCreateCategoryModal: (show: boolean) => void;
  parentCategory: number;
}

interface createCategoryModalProps {
  showCreateCategoryModal: boolean;
  setShowCreateCategoryModal: (show: boolean) => void;
  parentCategory: number;
}

And the component renders itself conditionally based on the value of showCreateCategoryModal. eslint no-unused-vars is failing for the variable show in the interface declaration because it is never used. The setShowCreateCategoryModal gets assigned to the values coming from the parent component defining

const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);

const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);

This means that the modal is hidden by default until setShowCreateCategoryModal(true) is called. Is the right approach here to add a rule to eslint config that disables checking arguments starting with an underscore and adding an underscore to the show variable name? Or am I doing react wrong? FWIW I am running pnpx next lint to run eslint

7 replies

TTCTheo's Typesafe Cult

•Created by 4z on 8/20/2023 in #questions

How to make a lists of multiple data types with overlapping IDs

I have types Foo and Bar and I want to show a list containing elements of both. The problem is that both Foo and Bar begin incrementing IDs from 0, so I can't set key={foobar.id} . I would like each key to be foo-${foobar.id} if the object is of type Foo OR bar-${foobar.id} if the object is of type Bar. I tried Googling this and I tried instanceof and is in a ternary, but I still couldn't get it to work.

4 replies

TTCTheo's Typesafe Cult

•Created by 4z on 3/12/2023 in #questions

env vars in prisma db seed (prisma/seed.ts)

What's the easiest way to use env vars from src/env.mjs in this prisma/seed.ts file? I tried import { env } from '../src/env.mjs' but got this error

Error [ERR_REQUIRE_ESM]: require() of ES Module /app/src/env.mjs not supported.
Instead change the require of /app/src/env.mjs to a dynamic import() which is available in all CommonJS modules.
An error occurred while running the seed command:
Error: Command failed with exit code 1: ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts

47 replies

Gaming

Programming