10 examples of 'how to pass function as props in react' in JavaScript

77
function findReactProps(component) {
78
    if (!component) return undefined;
79
    if (component.memoizedProps) return component.memoizedProps; // React 16 Fiber
80
    if (component._currentElement && component._currentElement.props) return component._currentElement.props; // React <=15
81
82
}

34
function mapToProps(_, _ref) {
35
  var phone = _ref.phone,
36
      _ref$phone = _ref.phone,
37
      call = _ref$phone.call,
38
      dialerUI = _ref$phone.dialerUI,
39
      callingSettings = _ref$phone.callingSettings,
40
      contactSearch = _ref$phone.contactSearch,
41
      connectivityMonitor = _ref$phone.connectivityMonitor,
42
      locale = _ref$phone.locale,
43
      rateLimiter = _ref$phone.rateLimiter,
44
      webphone = _ref$phone.webphone,
45
      audioSettings = _ref$phone.audioSettings,
46
      _ref$dialButtonMuted = _ref.dialButtonMuted,
47
      dialButtonMuted = _ref$dialButtonMuted === undefined ? false : _ref$dialButtonMuted;
48
49
  var isWebphoneMode = callingSettings.callingMode === _callingModes2.default.webphone;
50
  var waitingWebphoneConnected = isWebphoneMode && webphone && webphone.connecting;
51
  var webphoneDisconnected = isWebphoneMode && webphone && !webphone.connected;
52
  var audioNotEnabled = isWebphoneMode && audioSettings && !audioSettings.userMedia;
53
  var withinTab = (0, _hasActiveCalls2.default)(phone);
54
55
  return {
56
    currentLocale: locale.currentLocale,
57
    callingMode: callingSettings.callingMode,
58
    isWebphoneMode: isWebphoneMode,
59
    callButtonDisabled: !call.isIdle || !connectivityMonitor.connectivity || rateLimiter.throttling || webphoneDisconnected || audioNotEnabled,
60
    toNumber: dialerUI.toNumberField,
61
    recipient: dialerUI.recipient,
62
    searchContactList: contactSearch ? contactSearch.sortedResult : [],
63
    fromNumbers: callingSettings.fromNumbers,
64
    fromNumber: callingSettings.fromNumber,
65
    showSpinner: !(call.ready && callingSettings.ready && locale.ready && connectivityMonitor.ready && (!audioSettings || audioSettings.ready) && (!isWebphoneMode || !webphone || !waitingWebphoneConnected)),
66
    dialButtonVolume: audioSettings ? audioSettings.dialButtonVolume : 1,
67
    // If audioSettings is used, then use values from audioSettings module
68
    dialButtonMuted: audioSettings ? audioSettings.dialButtonMuted : dialButtonMuted,
69
    callBtnClassName: withinTab ? null : _styles2.default.callBtn
70
  };
71
}

1
export default function toRenderProps(hoc) {
2
  const RenderPropsComponent = props => props.children(props)
3
  return hoc(RenderPropsComponent)
4
}

42
getProps(name) {
43
  let props = {
44
    value: this.state.upload[name] || '',
45
    onChange: this.changeInput.bind(this, name)
46
  };
47
  return props;
48
}

66
render() {
67
  let ref: any = this.ref;
68
  if (!ref) {
69
    ref = (r: RefObject) => {
70
      if (r) this.ref = r;
71
    };
72
  }
73
  return createElement(
74
    Comp,
75
    { ...(this.props as any), ref },
76
    this.props.children,
77
  );
78
}

475
transformProps(props: ElementProps): ElementProps {
476
  return props;
477
}

23
return function WithComponent(props: Omit & CProps) {
24
  return ;
25
};

25
export function setProps(comp, newProps) {
26
  const node = findDOMNode(comp);
27
  render(React.createElement(comp.constructor, newProps), node.parentNode);
28
}

204
private _passAttributesAsProps() {
205
  const hostAttributes = Array.from((this.elementRef.nativeElement as HTMLElement).attributes);
206
207
  if (!this.reactNodeRef || !isReactNode(this.reactNodeRef.nativeElement)) {
208
    throw new Error('reactNodeRef must hold a reference to a ReactNode');
209
  }
210
211
  // Ensure there are no blacklisted props. Suggest alternative as error if there is any
212
  hostAttributes.forEach(attr => {
213
    const [forbidden, alternativeAttrName] = this._isForbiddenAttribute(attr);
214
    if (forbidden) {
215
      throw new Error(
216
        `[${(this.elementRef
217
          .nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${
218
          attr.name
219
        }' attribute set. Use the following alternative: ${alternativeAttrName || ''}`
220
      );
221
    }
222
  });
223
224
  const whitelistedHostAttributes = hostAttributes.filter(attr => !this._isIgnoredAttribute(attr));
225
  const props = whitelistedHostAttributes.reduce(
226
    (acc, attr) => ({
227
      ...acc,
228
      [attr.name]: attr.value,
229
    }),
230
    {}
231
  );
232
233
  const eventListeners = this.elementRef.nativeElement.getEventListeners();
234
  const eventHandlersProps =
235
    eventListeners && Object.keys(eventListeners).length
236
      ? toObject(
237
          Object.values(eventListeners).map<[string, React.EventHandler]>(([eventListener]) => [
238
            eventListener.type,
239
            (ev: React.SyntheticEvent) => eventListener.listener(ev && ev.nativeEvent),
240
          ])
241
        )
242
      : {};
243
  {
244
  }
245
246
  this.reactNodeRef.nativeElement.setProperties({ ...props, ...eventHandlersProps });
247
}

28
function forwardRef(props, ref) {
29
  return 
30
}