How to fix "... is not a function" error?

Buda Örs

I'm passing down a state setter to a child (from App to Nav), but when I'm calling it I'm getting TypeError: ... is not a function.

How should I fix it? What should I do?

App:

import React, { useState, useEffect } from 'react';
import './App.css';

/* Component imports */
import Nav from './components/nav/nav';
import Container from './components/container/container';

/*------------------*/

function App() {
  const [appState, setAppState] = useState("home");

    useEffect(() => {
      console.log(appState);
    }, [appState])

  return (  
    <div className="App">
      <Nav state={setAppState}/>
      <Container stateSetter={appState}/>
    </div>
  );
}

export default App;

Nav:

import React, { useState, useEffect } from 'react';
import './nav.css';

/* Component imports */



/*------------------*/

function Nav(props) {
    return (
        <div>
            <div className="Nav" id="nav">
                <nav>
                    <ul>
                        <li><button><span>App</span></button></li>
                        <li><button onClick={() => props.stateSetter("home")}>Home</button></li>
                        <li><button onClick={() => props.stateSetter("products")}>Products</button></li>
                        <li><button onClick={() => props.stateSetter("about_us")}>About Us</button></li>
                        <li><button onClick={() => props.stateSetter("log_in")}>Log in</button></li> 
                    </ul>
                </nav>
            </div>
        </div>
    );
}

export default Nav;

Container:

import React, { useState, useEffect } from 'react';
import './conatiner.css';

/* Component imports */



/*------------------*/

function Container(props) {

    const [cont_appState] = useState(props.state);

    useEffect(() => {

    }, [cont_appState])

    return (
        <div>
            <div className="container">

            </div>
        </div>
    );
}

export default Container;

I just started working an this project, I am also new to react, sorry for my messy code.

enter image description here

I have to add text to be able to post is: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam placeat atque ipsa eius facilis! Quidem ad officia architecto molestias! Autem molestias molestiae deserunt tempore maxime delectus commodi cum blanditiis inventore?

Vencovsky

You have a typo

Instead of

<Nav state={setAppState} />

It should be

<Nav stateSetter={setAppState} />

Where is the full component

function App() {
  const [appState, setAppState] = useState("home");

    useEffect(() => {
      console.log(appState);
    }, [appState])

  return (  
    <div className="App">
      <Nav stateSetter={setAppState}/>
      <Container stateSetter={setAppState}/>
    </div>
  );
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to fix this function to handle different error type of error catching

How to fix "TypeError: categories.map is not a function" error in React

How to fix this error "Function CollectionReference.doc()"

SQL WHEN function - How to fix Syntax Error?

How to fix error: implicit declaration of function ‘setup_timer’

How to fix the 'map is not a function' error in Javascript

How to fix this (is not a function) error?

How to fix syntax error in SWITCH function

How to fix compile error "This function or variable may be unsafe" (strcpy)

How to fix '.create is not a function' error in mongoose

How to fix eslint error in typescript NodeJs: 'Missing return type on function'

How to fix this error no matching function for call?

how to fix firebase function Unhandled error Error

How to fix TypeScript function type error?

How to fix 'callback is not a function error'?

How to Fix this.setState is not a function Error

How do I fix the 'is not a function' error on a function prototype?

How to fix POST is not function error in NodeJS

How to fix 'Unexpected Token' error with async function

How to fix error: "Call to a member function listSpatialIndexes() on null" and why is it happening?

How to fix "dispatch is not a function" error

How to fix "undefined method" error in destroy function

How to fix error with generic function in rust

Anylogic: How to fix NullPointerException error within function?

How to fix this function? Results in Error

how to fix an error "is not a function" in unit testing angular 11

How to fix TLS error in Azure Function App

How should I fix this error in strcmp function?

How to fix days.map is not a function error

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive