React js using useState Hook

Question

I'm trying to use useState react hook as follows,

 const [showMore, setShowMore] = useState(false);
    function handleClick(){
        setShowMore(true);
    }

I pass my wishlistItemCount value to WishlistItems component

const wishListItemCount = showMore ? itemsCount : 3;
   const contentMessageElement =
        <WishlistItems
            itemCount={wishListItemCount}
            wishlistId={data.id}
            items={items}/>

I use following button to change the state

           <Button
                onClick={handleClick}
                className={classes.btnshowmore}>Show More
             </Button>

But I get the error when I load the page

Storybook preview hooks can only be called inside decorators and story functions.

Please help

My Full component

import React,{ useCallback } from 'react';
import { useMutation } from '@apollo/client';

import {FormattedMessage, useIntl} from 'react-intl';
import {ChevronDown, ChevronUp, MoreHorizontal} from 'react-feather';
import {useWishlist} from '@magento/peregrine/lib/talons/WishlistPage/useWishlist';

import {mergeClasses} from '@magento/venia-ui/lib/classify';
import Icon from '../Icon';
import WishlistItems from './wishlistItems';
import defaultClasses from './wishlist.css';
import {Button} from "react-bootstrap";
import {useWishlistAllItems} from "./useWishlistAllItems";
import wishlistItemOperations from "./wishlistItem.gql";
import {useCartContext} from "@magento/peregrine/lib/context/cart";
import {Link} from "../../drivers";
import {useState} from "@storybook/addons";


const Wishlist = props => {
    const {data} = props;
    const {formatMessage} = useIntl();
    const {
        items_count: itemsCount,
        items: items,
        name,
        sharing_code: sharingCode
    } = data;


    const talProps = useWishlistAllItems({
        items,
        ...wishlistItemOperations
    });
    const {
        handleAddAllItemsToCart,
        saveWishList,
        hasError,
        isLoading
    } = talProps;

    const talonProps = useWishlist();
    const {isOpen} = talonProps;
    const [showMore, setShowMore] = useState(false);
    function handleClick(){
        setShowMore(true);
    }

    const wishListItemCount = showMore ? itemsCount : 3;


    const classes = mergeClasses(defaultClasses, props.classes);
    const contentClass = isOpen ? classes.content : classes.content_hidden;
    const visibilityLabel = sharingCode
        ? formatMessage({id: 'wishlist.publicText', defaultMessage: 'Public'})
        : formatMessage({
            id: 'wishlist.privateText',
            defaultMessage: 'Private'
        });


    const contentMessageElement = itemsCount ? (
        <WishlistItems
            itemCount={wishListItemCount}
            wishlistId={data.id}
            items={items}/>
    ) : (
        <p>
            <FormattedMessage
                id={'wishlist.emptyListText'}
                defaultMessage={'There are currently no items in this list'}
            />
        </p>
    );

    return (
        <div className={classes.root}>
            <div className={classes.header}>
                <div className={classes.nameContainer}>
                    <h2 className={classes.name}>{name}</h2>
                </div>
                <div className={classes.subname}>
                    <span className={classes.visibility}>
                        {visibilityLabel}
                    </span>
                    <a className={classes.seeall}>See all</a>
                </div>
            </div>
            <div className={classes.tableheadroot}>
                <p className={classes.th1}>Product Information</p>
                <p className={classes.th2}>Put in the Basket</p>
            </div>
            <div className={contentClass}>{contentMessageElement}</div>
            <div className={classes.showmore}>
                <Button
                    onClick={handleClick}
                    className={classes.btnshowmore}>Show More</Button>
            </div>
            <div className={classes.btnsetbottom}>
                <Link to={'/share-wishlist'}>
                <Button className={classes.btnsharewishlist}>
                    Share your wish list
                </Button>
                </Link>
                <Button
                    className={classes.btnsharewishlist}
                    onClick={handleAddAllItemsToCart}>
                    Put all the goods in basket
                </Button>
                <Button
                    onclick={saveWishList}
                    className={classes.btnsharewishlist}>
                    Save your wish list
                </Button>
            </div>
        </div>
    );
};

export default Wishlist;

Are you using a story in your storybook to show your new component? The problem looks like a storybook config problem, also Roy.B has a point in the onClick event from the button you should pass the reference or a function onClick={handleClick} or onClick={()=>handleClick()} — Yoandry Collazo
– Yoandry Collazo, Commented Nov 24, 2020 at 13:21
button click is not the issue.I have no idea about the storybooks — Sahan Thilakarathna
– Sahan Thilakarathna, Commented Nov 24, 2020 at 13:22

Ahmed Ahmed · Accepted Answer · 2021-02-08 00:36:18Z

34

try changing

import {useState} from "@storybook/addons";

to

import {useState} from "react";

answered Feb 8, 2021 at 0:36

Ahmed Ahmed

1,05611 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gxmad Over a year ago

I had this problem, is there any reason to import it from there?

pedrommuller Over a year ago

it's VS code IntelliSense, thanks for the help

jorisw Over a year ago

I need to do the opposite to make this work :shrug:

Mohammad Javad Ghasemy · Accepted Answer · 2020-11-24 13:20:48Z

0

           <Button
                onClick={handleClick}
                className={classes.btnshowmore}>Show More
             </Button>

there is different in html events and react.

document description

answered Nov 24, 2020 at 13:20

Mohammad Javad Ghasemy

1327 bronze badges

1 Comment

Sahan Thilakarathna Over a year ago

does'nt make any difference I have updated my question

Roy.B · Accepted Answer · 2020-11-24 15:03:44Z

0

You have 2 issues here, button on click invoke on render and you need to use storybook state to pass state changes

const [showMoreWishList, setShowMoreWishList] = useAddonState(data.id, false); 
  ...

function handleClick(){ 
  setShowMore(true); 
  setShowMoreWishList(true); 
}
 ...

  <Button 
    onClick={handleClick}
 ...

answered Nov 24, 2020 at 15:03

Roy.B

2,10417 silver badges24 bronze badges

Collectives™ on Stack Overflow

React js using useState Hook

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related