Cannot call Function within Another Function - React.JS

Asked
Active3 hr before
Viewed126 times

8 Answers

cannotfunctionreact
90%

You've created a global function, but you're calling it as if it's a member of App.,So either move the function to the App class, or remove this.,Calling genColor in the App function, but get

Pretag
 Pretag team - issue, fix, solve, resolve
88%

To achieve user interactivity, we can call functions and methods to accomplish specific operations in React. We pass data from parent to child or child to parent components using these actions.,Components are an integral part of React. Each React application consists of several components, and each component may require user interaction that triggers various actions.,This is not the only way to do this. You can also access the function directly from the click event without passing the reference to another function in the component.

1<ChildComponent
2    // The child component will access using actionName
3    actionName={this.actual_action_name}
4/>
load more v
72%

I ran into an issue where if I provided a function that used hooks in its implementation and returned some JSX to the callback for Array.prototype.map. The error I received was React Error: Rendered fewer hooks than expected.,This is why you need to use JSX (or React.createElement) when rendering components rather than simply calling the function. That way, any hooks that are used can be registered with the instance of the component that React creates.,Oh, and it's notable to mention that sometimes it will "work" to call function components. Like so:

.css-qnqv84{display:inline-block;width:2em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3;}1import * as React from 'react'23function Counter() {4  const [count, setCount] = React.useState(0)5  const increment = () => setCount(c => c + 1)6  return <button onClick={increment}>{count}</button>7}89function App() {10  const [items, setItems] = React.useState([])11  const addItem = () => setItems(i => [...i, {id: i.length}])12  return (13    <div>14      <button onClick={addItem}>Add Item</button>15      <div>{items.map(Counter)}</div>16    </div>17  )18}
load more v
65%

A method is a function that is a property of an object. Read more about objects and methods in Working with objects.,Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.,For example, consider the following function definition:

function square(number) {
   return number * number;
}
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Hot to call this function from another component in react?,Are you calling this from a functional component or a class component? Where and when do you want to call the component (on mount, after a specific condition, etc.)? ,Then you can create a ref in the "another component" and apply it to this component where you have this function. Then you can call this.yourRef.current.uCyr()

export default uCyr;
load more v
22%

In JavaScript, these two code snippets are not equivalent:,Make sure you aren’t calling the function when you pass it to the component:,If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).

<button onClick={this.handleClick}>
load more v
60%

Make a call to the inner function in the return statement of the outer function.,Write one function inside another function.,How to call a function that return another function in JavaScript ?

Other "cannot-function" queries related to "Cannot call Function within Another Function - React.JS"