CODEWITHSUNDEEP
reactjsreact-hooks
Markohan
Markohan

Reputation: 132

React useToggle component returning TypeError: Object is not a function or its return value is not iterable

I'm attempting a component which is essentially a "like" button that should be toggled on and off, using React and useToggle, however it's returning the TypeError: Object is not a function or its return value is not iterable.

import React, { useToggle } from 'react';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const ThumbUpButton = {
  backgroundColor: 'green',
  border: 'none',
  padding: '5px',
  borderRadius: '5px',
}

const ThumbUp = {
  color: 'white'
}

const Liker = () => {
  const [like, unLike] = useToggle();

  return (
    <div>
      <button style={ThumbUpButton} onClick={unLike}>
        {like ? <ThumbUpIcon style={ThumbUp}/> : <ThumbUpIcon />}
        
      </button>
    </div>
  );
}

export default Liker;

Upvotes: 1

Views: 996

Answers (2)

Nghia
Nghia

Reputation: 86

You should define the hook 'useToogle` somewhere, then use it inside the 'Liker' component.

import React, { useState } from 'react';

const ToogleHook = (initValue) => {
    const [value, setValue] = useState(initValue);

    function toogleValue() {
        setValue(!value);
    }

    return [value, toogleValue];
}

const Liker = () => {
    const [like, toogleLike] = ToogleHook(false);

    return <button onClick={toogleLike}>{like ? '👍🏿' : '👎🏿'}</button>
}

export default Liker;

Upvotes: 1

Ron B.
Ron B.

Reputation: 1540

useToggle is not a hook exported from react. Have you written it in another file and messed uo the imports, perhaps? Cause this hook is not a React basic hook

Upvotes: 1

Related Questions