CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Laczkó Örs
Laczkó Örs

Reputation: 1118

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

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?

Upvotes: 3

Views: 7102

Answers (1)

Vencovsky
Vencovsky

Reputation: 31605

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>
  );
}

Upvotes: 3

Related Questions