How to use @sitecore-jss/sitecore-jss-react - 10 common examples

const StyleguideFieldUsageText = (props) => {
  const fieldValue = getFieldValue(props.fields, 'sample');

  return (
    
      {/* Basic emission of a number field for editing can be done with the 
  );
};

componentDidUpdate(previousProps) {
    const existingRoute = previousProps.route.match.url;
    const newRoute = this.props.route.match.url;

    // don't change state (refetch route data) if the route has not changed
    if (existingRoute === newRoute) {
      return;
    }

    // if in experience editor - force reload instead of route data update
    // avoids confusing Sitecore's editing JS
    if (isExperienceEditorActive()) {
      window.location.assign(newRoute);
      return;
    }

    this.updateLanguage();
    this.updateRouteData();
  }

componentWillReceiveProps(newProps) {
    const existingRoute = this.props.route.match.url;
    const newRoute = newProps.route.match.url;

    if (existingRoute !== newRoute) {
      // if in experience editor - force reload
      if (isExperienceEditorActive()) {
        window.location.assign(newRoute);
        return;
      }

      // get the route data for the new route
      SitecoreContentService.getRouteData(newRoute).then((routeData) => {
        if (routeData !== null) {
          // set the sitecore context data and push the new route
          SitecoreContextFactory.setSitecoreContext({
            route: routeData.sitecore.route,
            itemId: routeData.sitecore.route.itemId,
            ...routeData.sitecore.context,
          });
          this.setState({ state: routeData, notFound: false });
        } else {
          this.setState({ notFound: true });

componentDidUpdate(previousProps) {
    const existingRoute = previousProps.route.match.url;
    const newRoute = this.props.route.match.url;

    // don't change state (refetch route data) if the route has not changed
    if (existingRoute === newRoute) {
      return;
    }

    // if in experience editor - force reload instead of route data update
    // avoids confusing Sitecore's editing JS
    if (isExperienceEditorActive()) {
      window.location.assign(newRoute);
      return;
    }

    this.updateLanguage();
    this.updateRouteData();
  }

function getRouteData(route, language) {
  const fetchOptions = {
    layoutServiceConfig: { host: config.sitecoreApiHost },
    querystringParams: { sc_lang: language, sc_apikey: config.sitecoreApiKey },
    fetcher: dataFetcher,
  };

  return dataApi.fetchRouteData(route, fetchOptions).catch((error) => {
    if (error.response && error.response.status === 404 && error.response.data) {
      return error.response.data;
    }

    console.error('Route data fetch error', error, error.response);

    return null;
  });
}

}

  const systemQueryParams = {
    sc_lang: language,
    sc_apikey: config.sitecoreApiKey
  };
  const queryParams = Object.assign(currentUrlParams, systemQueryParams);

  const fetchOptions = {
    layoutServiceConfig: { host: config.sitecoreApiHost },
    querystringParams: queryParams,
    requestConfig: options,
    fetcher: dataFetcher
  };

  return dataApi.fetchRouteData(route, fetchOptions).catch((error) => {
    if (error.response && error.response.status === 404 && error.response.data) {
      return error.response.data;
    }

    console.error('Route data fetch error', error, error.response);

    return null;
  });
}

*/}
      {props.fields &&
        props.fields.checkbox &&
        props.fields.checkbox.value && (
          <li>
            <code>checkbox</code> is true
          </li>
        )}
      {!props.fields ||
        !props.fields.checkbox ||
        (!props.fields.checkbox.value &amp;&amp; (
          <li>
            <code>checkbox</code> is false
          </li>
        ))}
      {getFieldValue(props.fields, 'checkbox2', false) &amp;&amp; (
        <li>
          <code>checkbox2</code> is true
        </li>
      )}
      {!getFieldValue(props.fields, 'checkbox2', false) &amp;&amp; (
        <li>
          <code>checkbox2</code> is false
        </li>
      )}
    
  
);

<code>checkbox</code> is true
          
        )}
      {!props.fields ||
        !props.fields.checkbox ||
        (!props.fields.checkbox.value &amp;&amp; (
          <li>
            <code>checkbox</code> is false
          </li>
        ))}
      {getFieldValue(props.fields, 'checkbox2', false) &amp;&amp; (
        <li>
          <code>checkbox2</code> is true
        </li>
      )}
      {!getFieldValue(props.fields, 'checkbox2', false) &amp;&amp; (
        <li>
          <code>checkbox2</code> is false
        </li>
      )}
    
  
);

export const getRouteData = (route) => {
  switch (route) {
    case '/': {
      return convertRouteToLayoutServiceFormat(routes.home);
    }
  }
};