'setLoading' is missing in props validation

Question

I'm using react 17.0.2 with Typescript. I'm trying to pass setLoading from the parent component (App) to the child component (About) such that the loading state in App can be set from About.

interface AboutProps {
  setLoading: (arg: boolean | undefined) => void
}

const About: React.FC<AboutProps> = ({ setLoading }) => {
  const fields = [
       ...
  ];

  const { data, loading, error } = useFetch('About', fields);

  useEffect(() => setLoading(loading), [loading]);

  return (
    <div className="aboutComponent">
        <div>
          <Title title={data.custom_title} />
          <Card
            text={data.body}
          >
            <Skills
              skills_={data.skills}
              skillYears_={data.skill_years}
              columns_={data.n_skills_columns}
            />
          </Card>
        </div>
    </div>
  );
};

However, ESLint is complaining about missing props validation for setLoading in line 1. The setLoading function is passed from the parent component here:

const App = () => {
  const [loading, setLoading] = useState<any>(false);

  return (
    <div>
      <About setLoading={setLoading} />
    </div>
  );
};

I haven't seen this error before and I'm not sure what to do, since I already type the props with AboutProps interface.

Do you try [this](https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation) — Alexander Vidaurre Arroyo, Jan 08 '22 at 14:26
I did, but I wasn't sure which type belongs to the `setLoading` prop — DSteman, Jan 08 '22 at 15:18

score 1 · Accepted Answer · answered Jan 08 '22 at 14:29

1

I'm new to TypeScript as well, but I believe you can do this:

const About = ({ setLoading }:AboutProps) => {

Also, React TypeScript Cheatsheet has a section about React.FC being discouraged.

answered Jan 08 '22 at 14:29

Dave

7,552
4
22
26

'setLoading' is missing in props validation

1 Answers1