We Keep Coding

How to fix - Functions are not valid as a React child?

I’m calling a function that returns some html code.
But if I want to send this function a parameter, then it tells me that Functions are not valid as a React child, the problem is that I want to access the props from the function, in order to do that, I changed the call in jsx as:
... ...
{this.showActivitiesIcon.bind(this)}
... ...
I tried setting a state inside the component, and setting the state from componentDidMount
componentDidMount = () => {
this.setState({
currentCountry: this.props.country
})
}
But, inside componentDidMount, there’s no such thing as this.props.country, and it’s useless to set this.componentDidMount.bind(this) inside the constructor. What can I do to fix it?

Here is the correct syntax, because bind(thisArg) returns a function:
{this.showActivitiesIcon.bind(this)()}

You seem like something:
super(props)
Can you share the whole code for this component?

Seems like you're are not calling the function in your JSX.
Make sure you invoke it while using it so that it returns valid JSX.
this.showActivitiesIcon.bind(this)()

React useState hook: passing setter to child- functional update, callback and useCallback

I have a few questions related to each other regarding React hooks: useState and useCallback.
When exactly is a functional update required?
1.1. If the setter function receives a function its argument will ALWAYS be the previous state?
If I want to update the parent state from the child component, how should I pass the setter to the child- wrap it in another function as a callback as explained here? just pass it directly as suggested here?
2.1. What are the reasons and advantages/disadvantages of each approach?
If I can just pass it directly and I am using memo, is useCallback required as explained here?
If I want to use the most recent state data when updating the parent state from the child, how should I do this?
4.1. Is passing a callback to the child useful in that case?

1. When exactly is a functional update required?
You may need to update any state on your component. For example, you are getting user from server via api and you need to store that user on your component. To do so, you need useState to store that user object. Here is the example:
const [user, setUser] = useState({}); // declaration
let newUser = u; // u is coming from api
setUser(newUser);
1.1. If the setter function receives a function its argument will ALWAYS be the previous state?
Yes. setter function like setState is used in class component. Here is the example of only update a state field:
this.setState({username: 'khabir'});
here you are updating state using previous state:
this.setState(prevState =>{
return{
counter : prevState.counter +1
}
})
2. If I want to update the parent state from the child component, how should I pass the setter to the child- wrap it in another function as a callback as explained here? just pass it directly as suggested here?
Both examples are same. you can use anyone.
3. If I can just pass it directly and I am using memo, is useCallback required as explained here?
If you pass any function reference to the child component from parent component, it is being created on every render of Parent and hence prevProps and props is not the same anymore even though they are.
To apply the memo, we need to make sure that function reference is not unnecessarily recreated on every render of Parent. That's why useCallback is used. Please read that article completely for better understanding.
4. If I want to use the most recent state data when updating the parent state from the child, how should I do this?
You can not update parent state directly from child component but you can send function reference to child component and call that function from child component that defined (the function) on parent component. In that function body (in parent), you can update your state of parent component.
4.1. Is passing a callback to the child useful in that case?
Yes as I said on the answer of question number 4.

Where is setting the params in this prop function?

I am checking this live demo to build a pagination component on ReactJs: https://codesandbox.io/s/l29rokm9rm?hidenavigation=1&view=preview&file=/src/App.js:2182-2216
My question is: Where and how is setting the params in this function?:
onPageChanged={this.onPageChanged}
That function get "data":
onPageChanged = data => {
I don't get where and how the App is passing "data" to Pagination component.
Thanks.

the function this.onPageChanged is being passed as a reference to the child component and it been called from there, it is not being called from here(App Component it self) to pass arguments to it!
if you check the Pagination component in the example that you've been provided, you will see that its is being called from gotoPage method of the component like below on line 53:
this.setState({ currentPage }, () => onPageChanged(paginationData));
and you can see that the data value comes from there in here onPageChanged(paginationData)
basically in react you can pass any value as props to the child components and as much as functions are considered as value ( for example you can assign a function to a variable ) then you can pass it down as a reference (consider it as a callback) to be called from another place!

Call deep child function in App.js (grand grand parent) component react

I had a case when I need to call a child function in my App.js component.
The short schema look like this :
Where I need to call the function() from the App.js, and the the function triggers something directly inside the Child 3 component.
I'm avoiding using function props drilling from the parent where this could be another problem in the future.
I tried to use Redux to dispatch the function into store, but Redux doesn't allow non-object properties to be stored.
Any help would be appreciated!

when I read the documentation of the react, I am confused by the following words

I'm confused with these words :
if this callback is passed as a prop to lower components, those components might do an extra re-rendering

The key part is where it says that a problem with it is that a callback is created every time the LoggingButton renders.
Say a child component was created like:
MyButton onClick={ (e) => this.handleClick.bind(this)}
I'm that case if LoggingButton rerenders, MyButton will render too becasue the reference to this.handleClick that was created anonymously will be destroyed.
Alternatively if the function is bound in the constructor the reference will not be destroyed if Logging Button rerenders so MyButton will not render again.
Where you really dont want to do the arrow function is in a loop.