logo
down
shadow

Performing logical operation inside Higher Order Component on prop set


Performing logical operation inside Higher Order Component on prop set

By : Priya
Date : October 21 2020, 08:10 PM
may help you . Since the resulting type is based on the passed props, you do not need to keep it in the state. Just calculate it inside the render method.
And for this kind of component (where you do not need state nor any of the life-cycle methods) you can use a pure component
code :
import React from "react";

const MatchWrapper = WrappedComponent => (props) => {
  const {show, percentage } = props;
  let type = "";
  switch (true) {
    case percentage > 75:
      type = "succes";
      break;
    case percentage > 50 && 75 >= percentage:
      type = "mediocore";
      break;
    case percentage <= 50:
      type = "failure123";
      break;
  }

  return show && <WrappedComponent {...props, type} />
}

export default MatchWrapper;


Share : facebook icon twitter icon
Access prop outside of class in React when calling Higher Order Component

Access prop outside of class in React when calling Higher Order Component


By : WernerHackl
Date : March 29 2020, 07:55 AM
hope this fix your issue I am trying to use a Higher Order Component(HOC) pattern to reuse some code that connects to state and uses the Redux Form formValueSelector method. , TLDR: use ownProps parameter
Draft of what you should do
code :
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

function FormItemsValueSelectorHOC(FormElement) {
  @connect((state, ownProps) => {
    const formName = ownProps.formName;
    const selector = formValueSelector(formName);
    const items = selector(state, 'items');
    return {
      items
    };
  }, null)
  class Base extends Component {
    render() {
      // Now in here you should omit `formName` from the props you are
      // passing to your Form Element since it's not used overthere
      return (
        <FormElement {...this.props} />
      );
    }
  }
  return Base;
}
export default FormItemsValueSelectorHOC;
formItemsValueSelectorHOC(StatementLineItemDesktop);
<ConnectedStatementLineItemDesktop formName={"editQuote"} />
mapStateToProps(state, [ownProps]): stateProps
function mapStateToProps(state, ownProps) {
  const formName = ownProps.formName;
  const selector = formValueSelector(formName);
  const items = selector(state, 'items');
  return {
    items
  };
}
this.props out of date inside componentDidUpdate() using Higher Order Component

this.props out of date inside componentDidUpdate() using Higher Order Component


By : boberstep
Date : March 29 2020, 07:55 AM
around this issue I think this is just an asynchronous problem - when your HOC mounts it is calling fetch() which isn't resolved instantly so that is why on the first render this.state.x are their initial empty values.
When the Promise is resolved, the values are set and the subsequent render will have the expected values.
code :
render () {
  if(this.state.title.length === 0) {
    return <div>Loading...</div>; //or some nice <Loading> component
  }

  return (
    <WrappedComponent
      id={this.props.match.params.id}
      title={this.state.title}
      content={this.state.content}
      catchPhrase={this.state.catchPhrase}
    />
  )
}
How can I use React Router's withRouter HOC inside my own higher order component (HOC)?

How can I use React Router's withRouter HOC inside my own higher order component (HOC)?


By : Mindinventory
Date : March 29 2020, 07:55 AM
Any of those help I have a higher order component which uses the location.search prop provided by React Router to construct a queryParams object and pass it as a prop to its wrapped component.
code :
function withQueryParams(WrappedComponent) {
        return withRouter((props) => {
           const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
           const newProps = {
               ...props,
               queryParams: queryParams
           }

           return <WrappedComponent {...newProps} />
        })
}

export default withQueryParams
Default prop types through a higher order component

Default prop types through a higher order component


By : abrakadabra1234
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , You have to leverage JSX.LibraryManagedAttributes to be able to extract required and optional (defaulted) props from wrapped component in your HOC. This looks somewhat tricky:
code :
import React from 'react';

interface FooProps {
  theme: string;
  name: string;
}

class Foo extends React.Component<FooProps> {
  static defaultProps = {
    name: 'world',
  };
  render() {
    return <span>hello ${this.props.name}</span>;
  }
}

interface ThemedProps {
  theme: string;
}

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Subtract<T extends K, K> = Omit<T, keyof K>;


const themed = <
  C extends React.ComponentType<React.ComponentProps<C> & ThemedProps>,
  // that's where all the magic happens
  ResolvedProps = JSX.LibraryManagedAttributes<C, Subtract<React.ComponentProps<C>, ThemedProps>>
>(
  Component: C
) => {
  return class ThemeWrappedComponent extends React.Component<ResolvedProps> {
    static displayName = `themed(${ComponentToWrap.displayName})`;

    render() {
      return (
        <Component
          // proper typecast since ts has fixed type infering on object rest
          {...this.props as JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>} 
          theme="theme" 
        />
      );
    }
  };
};

const Wrapped = themed(Foo);

const el = <Wrapped />; // works
How would I access a method/function from a HOC (Higher Order Component) in React without passing it as a prop?

How would I access a method/function from a HOC (Higher Order Component) in React without passing it as a prop?


By : SAM
Date : March 29 2020, 07:55 AM
I hope this helps . I have a higher order component. I can inherit props into my Wrapped Component from the HOC but I also want to inherit it's methods/functions. What is the best way to do this. , This seems like a job for inheritance, e.g.
Related Posts Related Posts :
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • Strage Vue behaviour. V-if does not watch properly
  • Is it possible to use map/filter/reduce inside a promise by returning the result with Promise.resolve?
  • Does EcmaScript have any rule where whitespace is important for the compiler during parsing
  • How is DOM and Virtual DOM represented in memory?
  • cannot display text onchange select option
  • My gulpfile can edit (change) and delete file, but dont copy new (add) files
  • How do I reset scroll position of paper-dialog-scrollable?
  • Loading unlooped gif-animation several times
  • Strange error from Google API: initializeAutocomplete is not a function
  • Array state variable is not being set during componentWillMount
  • Stop refresh on form submit when using javascript
  • Npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please
  • Cant get wheel scroll delta on Firefox
  • Puppeteer with Prompt, ignoring rest of function
  • VueJS Form Input Binding
  • How To Extend mail.Chatter Widget in Javascript Odoo 10
  • How Chk two checkboxes at a time using jQuery
  • Broken "if" statement in JavaScript code…
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org