CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-propsreact-state-management
user11029782
user11029782

Reputation:

React Hooks: Passing state prop is NOT a function?

I am passing state hooks as props to my components and my 'setCity' works perfectly fine but when I try implementing setFlag I get an error saying "Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function"

So why can I set the value of city but not flag? I pass the props from 'App' to 'footer' which passes to 'searchbar'.

function App(){
  const [city, setCity] = useState("");
  const [flag, setFlag] = useState("");
  return (
    <div className='container'>
      <Header className='header' />
      <Body className='body' city={city} flag={flag}/>
      <Footer className='footer' setCity={setCity} setFlag={setFlag}/>
    </div>
  );
}

function Footer({setCity}, {setFlag}){
    return(
        <div className='footer'>
            Footer
            <Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
        </div>
    )
}

function Searchbar({setCity}, {setFlag}){

    handleChange = (e) =>{
        e.preventDefault();
        console.log(e.target.value);
        setCity(e.target.value);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log("submitted");
        setFlag(false);
    }
    return(
        <div className='searchbar'>
            <form>
                <select defaultValue="default" onChange={handleChange}>
                    <option value="default" disabled>Choose a state...</option>
                    <option value="Alabama">Alabama</option>
                    <option value="Alaska">Alaska</option>
                    ...
                </select>
                <button type="button" onClick={handleSubmit}>Search</button>
            </form >
        </div>
    );
};

Upvotes: 0

Views: 3792

Answers (3)

mazoula
mazoula

Reputation: 1321

I had a similar problem. where a function (here setCity, setFlag) was not recognized as a function in the child of a child. My solution that didn't use typescript or the propTypes library was to wrap setCity and setFlag in new functions in the first child and then pass those new functions to the next child.

Upvotes: 0

GMKHussain
GMKHussain

Reputation: 4691

Are you still facing ?

Uncaught TypeError: setCity is not a function

const { setCity=()=>{}, setFlag=()=>{} } = props

Upvotes: -1

Federkun
Federkun

Reputation: 36964

All the props are passed as the first argument of the component,

function Searchbar({setCity}, {setFlag}){

should be

function Searchbar({setCity, setFlag}){

Same apply for Footer

Upvotes: 6

Related Questions