CODEWITHSUNDEEP
reactjstypescriptreact-hooks
ChangHun Lee
ChangHun Lee

Reputation: 65

How do I controll return type of useState

I just want to change state to working or leaving. I've tried to use useState but it returns void type. How can I return boolean type? I'm beginner of typescript plz help me guys

import React, {useState,  useCallback} from 'react';
import MainHeader from 'components/UI/Main/MainHeader';

interface MainHeaderState {
   working: boolean,
}
const MainHeaderContainer:React.FC<MainHeaderState> = () =>{

    const [working, setWorking] = useState(false);
    const onWorking = useCallback(() => {
        return setWorking(true);
    }, [])

    const onLeaving = useCallback(() =>  {
        return setWorking(false)
    } ,[])

    return (
      <MainHeader
        working = {onWorking}
        leaving = {onLeaving}
      />
    );
}
export default MainHeaderContainer

Upvotes: 0

Views: 3013

Answers (2)

Yash Gadle
Yash Gadle

Reputation: 451

Don't use the return keyword.

Try this out:-

import React, {useState,  useCallback} from 'react';
import MainHeader from 'components/UI/Main/MainHeader';

const MainHeaderContainer:React.FC = props =>{

    const [working, setWorking] = useState(false);
    const onWorking = useCallback(() => {
        setWorking(true);
    }, [])

    const onLeaving = useCallback(() =>  {
        setWorking(false)
    } ,[])

    return (
      <MainHeader
        working = {onWorking}
        leaving = {onLeaving}
      />
    );
}
export default MainHeaderContainer

The MainHeader component:-

import React from 'react';
import classes from './MainHeader.module.scss';
import { NavLink } from 'react-router-dom';
import Button from 'components/UI/Button'

interface MainHeaderProps {
  working:() => void;
  leaving:() => void;
}
const MainHeader: React.FC<MainHeaderProps> = props => {
  return (
    <div className = {classes.HeaderWrapper}>
      <div className = {classes.Search}>
        <input type = "text" placeholder = "Search...."/>
      </div>
      <div className = {classes.Navbar}>
        <nav>
        <span><NavLink exact to = '/notice'>notice</NavLink></span>
        </nav>
        <Button btnType = 'working' clicked = {props.working} btnValue = "working"/>
        <Button btnType = 'leaving' clicked = {props.leaving} btnValue = "leaving"/>
      </div>
    </div>
  )
}
export default MainHeader;

The problem is that your prop types for MainHeader do not match the values that you are passing it. You are passing it a function and it was expecting a boolean (Check your MainHeader component). So I simply changed the prop types to function and it should work now.

Upvotes: 2

ChangHun Lee
ChangHun Lee

Reputation: 65

  • This is MainHeader component
import React from 'react';
import classes from './MainHeader.module.scss';
import { NavLink } from 'react-router-dom';
import Button from 'components/UI/Button'

interface MainHeaderProps {
  working: boolean,
  leaving: boolean
}
const MainHeader: React.FC<MainHeaderProps> = (working,leaving) => {
  return (
    <div className = {classes.HeaderWrapper}>
      <div className = {classes.Search}>
        <input type = "text" placeholder = "Search...."/>
      </div>
      <div className = {classes.Navbar}>
        <nav>
        <span><NavLink exact to = '/notice'>notice</NavLink></span>
        </nav>
        <Button btnType = 'working' clicked = {working} btnValue = "working"/>
        <Button btnType = 'leaving' clicked = {leaving} btnValue = "leaving"/>
      </div>
    </div>
  )
}
export default MainHeader;

Upvotes: 0

Related Questions