Question 73200 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Prop not used properly – Reactjs

I´m getting the error that setAnimals is not a function. I controlled every prop but i can´t find the mistake

Form code:

export default function AddAnimalForm({setAnimals, animals}) {
  const [submitMessage, setSubmitMessage] = useState(false);
  const [showDetails, setShowDetails] = useState(false);
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data, event) => {
    event.target.reset();
    const newAnimal = { ...data, id: uid() };
    setAnimals([...(animals || []), newAnimal]); 
    setSubmitMessage(true);
    setShowDetails(true);
    setTimeout(() => {
      setSubmitMessage(false);
      setShowDetails(false);
    }, 3000);
  };

App.js code:

import GlobalStyle from "@/styles";
import Head from "next/head";
import useLocalStorageState from "use-local-storage-state";
import Link from "next/link";
import StyledButton from "@/components/Navigation"


export default function App({ Component, pageProps }) {
  const [animals, setAnimals] = useLocalStorageState("animals", []);

  return (
    <>
      <GlobalStyle />
      <Head>
        <title>Capstone Project</title>
      </Head>
      <Component {...pageProps} animals={animals} setAnimals={setAnimals} />

As far as I can see I gave it properly to every page necessary.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the solution.. I didn´t give the props to the actual page.


  2. 0

    Try

    <Component {...pageProps, animals, setAnimals}/>

    But I would suggest creating a react context and wrap the <Component/> with a provider.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search