React async and hooks

Question

the problem is that iam trying to use prop as initialstate for useState, which comes asynchronously from store and after page refresh iam getting, that this prop is undefined, how can i load props before call, check my code below.

logic: prop in coming from store through redux for first time i redirect to this page everything works after page refresh iam getting error which i sent below.

ps i hide imports and connect func from snippet for less code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


    const PropertyComponent = (props) => {
      const {
        offer,
        icons,
        activeOffer,
        onOfferCardHover,
        onOfferCardLeave,
        history,
        setBookmarkStatus,
      } = props;

      const onUserNameClick = () => history.push(`/favorites`);

      const [status, setStatus] = useState(offer.is_favorite);

      const bookmarkHandler = () => {
        setStatus(Number(!status));
        setBookmarkStatus(offer.id, Number(!status));
      };

      const bookmarkClass = cn(`property__bookmark-button button `, {
        'property__bookmark-button--active': status
      });

      return (
        <div className="page">
          <Header onUserNameClick={onUserNameClick} />
          {!offer && (
            <h1 className="property__name">
              <Loader type="ThreeDots" color="#4873FA" height={200} width={200} />
            </h1>
          )}
          {offer && (
            <section className="property">
              <div className="property__gallery-container container">
                <div className="property__gallery">
                  {offer.images.map((image, index) => {
                    return (
                      <div className="property__image-wrapper" key={index}>
                        <img
                          className="property__image"
                          src={image}
                          alt="Photo studio"
                        />
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="property__container container">
                <div className="property__wrapper">
                  {offer.is_premium && (
                    <div className="property__mark">
                      <span>Premium</span>
                    </div>
                  )}
                  <div className="property__name-wrapper">
                    <h1 className="property__name">{offer.title}</h1>
                    <button
                      className={bookmarkClass}
                      type="button"
                      onClick={bookmarkHandler}
                    >
                      <svg
                        className="property__bookmark-icon"
                        width="31"
                        height="33"
                      >
                        <use xlinkHref="#icon-bookmark" />
                      </svg>
                      <span className="visually-hidden">To bookmarks</span>
                    </button>
                  </div>
                  <div className="property__rating rating">
                    <div className="property__stars rating__stars">
                      <span style={{width: `${offer.rating * 20}%`}} />
                      <span className="visually-hidden">Rating</span>
                    </div>
                    <span className="property__rating-value rating__value">
                      {offer.rating}
                    </span>
                  </div>
                  <ul className="property__features">
                    <li className="property__feature property__feature--entire">
                      {offer.type}
                    </li>
                    <li className="property__feature property__feature--bedrooms">
                      {offer.bedrooms} Bedrooms
                    </li>
                    <li className="property__feature property__feature--adults">
                      Max {offer.max_adults} adults
                    </li>
                  </ul>
                  <div className="property__price">
                    <b className="property__price-value">&euro;{offer.price}</b>
                    <span className="property__price-text">&nbsp;night</span>
                  </div>
                  <div className="property__inside">
                    <h2 className="property__inside-title">What&apos;s inside</h2>
                    <ul className="property__inside-list">
                      {offer.goods.map((feature, index) => {
                        return (
                          <li className="property__inside-item" key={index}>
                            {feature}
                          </li>
                        );
                      })}
                    </ul>
                  </div>
                  <div className="property__host">
                    <h2 className="property__host-title">Meet the host</h2>
                    <div className="property__host-user user">
                      <div className="property__avatar-wrapper property__avatar-wrapper--pro user__avatar-wrapper">
                        <img
                          className="property__avatar user__avatar"
                          src={offer.host.avatar_url}
                          width="74"
                          height="74"
                          alt="Host avatar"
                        />
                      </div>
                      <span className="property__user-name">{offer.host.name}</span>
                    </div>
                    <div className="property__description">
                      <p className="property__text">
                        A quiet cozy and picturesque that hides behind a a river by
                        the unique lightness of Amsterdam. The building is green and
                        from 18th century.
                      </p>
                      <p className="property__text">
                        An independent House, strategically located between Rembrand
                        Square and National Opera, but where the bustle of the city
                        comes to rest in this alley flowery and colorful.
                      </p>
                    </div>
                  </div>
                  <section className="property__reviews reviews">
                    <ReviewList offerId={offer.id} />
                    <ReviewForm offerId={offer.id}/>
                  </section>
                </div>
              </div>
              <section className="property__map map" style={{padding: `0 15rem`}}>
                {<Map icons={icons} activeIconId={activeOffer} />}
              </section>
            </section>
          )}
          {offer && (
            <NearPlaces
              offerId={offer.id}
              onOfferCardHover={onOfferCardHover}
              onOfferCardLeave={onOfferCardLeave}
            />
          )}
          {offer && <Footer />}
        </div>
      );
    };

error_image

mainPage here iam getting error after refesh

Answer 1

Problem may be the prop offer . You may try adding default is_favorite by controlling the is_favorite from the offer . You can do such thing

useState((offer.is_favorite !== undefined ) ? offer.is_favorite:"default_is_favorite");