If i have a function that i want to send to a component as a prop
// Bind the function
this.myFunc = this.myFunc.bind(this)
// Create the function
myFunc(X) {
this.props.anotherFunc(X).result === 'Something' && .....
}
// Pass the function as prop
<OtherComponent myFunc={this.myFunc} />
However the function is already using a prop from another class, and i get "cannot read property 'result' of undefined"
So how can i pass a function as a prop if that function is already using another prop from another component ?
You should try render props Render Props, its is a technique for sharing code between react component using props whose value is a function. Another method is Higher order component.
Related
Within Session() I want to access stateABC, which is in Item5().
The setup of my code looks like this:
Session.js:
function Session() {
//get handleRender(item).props.stateABC here
return (
<View>
{handleRender(item)}
</View>
);
}
handleRender.js:
export function handleRender(item) {
if(item == "Item5"){
return (
{Item5()}
);
}
}
Item5.js:
export function Item5() {
const [stateABC, setStateABC] = useState("123");
return (
....
);
}
I tried to get the value in Session() by using handleRender(item).props.stateABC, but all I get is an empty value.
Is it possible to receive properties from a function like that or are props only accessible in class components?
Any help is appreciated.
Thanks
If you need to access to stateABC value from Session component you have to pass a callback prop down from Session to Item5 and call it every time you update stateABC with setStateABC, passing the new value to the callback.
This is the simplest approach, you could also use React Context API or even something like Redux if you think that your app will grow in complexity.
Also, the approach that you tried to use is a bad idea. It works only in class component but in any case you should not use it, it's a bad thing to access props directly.
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!
I have a function in a component which I want to call in a child component.
This is the function in the parent component:
handleFilterGroupsQuery = queryObject => {
return queryObject;
}
I have binded it to this in the constructor (in parent component):
constructor(props) {
super(props);
this.handleFilterGroupsQuery = this.handleFilterGroupsQuery.bind(this);
}
Within the render method of this component, I am passing down this function to a child component like so:
<FilterGroupsSection
handleFilterGroupsQuery={(queryObject) => {this.handleFilterGroupsQuery(queryObject)}}
/>
In the FilterGroupsSection (child) component, I am trying to call this function like so:
let test = 'test'
console.log(this.props.handleFilterGroupsQuery(test));
This displays 'undefined' in the console. I can't figure out why the parameter value is not being passed correctly.
Appreciate any advice.
You have 2 options. Just remove additional {} in function binding to your child component or use return:
handleFilterGroupsQuery={(queryObject) => this.handleFilterGroupsQuery(queryObject)}
or
handleFilterGroupsQuery={(queryObject) => { return this.handleFilterGroupsQuery(queryObject)}}
One good solution would be to pass the argument and the function separately:
<Parent
handleFilterGroupsQuery={this.handleFilterGroupsQuery}
queryObject={queryObject}
/>
Then, you can easily bind the argument every time you call the function at your child component:
this.props.handleFilterGroupsQuery.bind(null, queryObject);
Otherwise, the unnamed inline functions and object will have new references and trigger a complete re-render of the component tree below.
I am new to VueJs and I am doubtful about passing the optional payload
Could anyone please tell me how to pass the value returned by a computed function in the child component to the parent component using the optional payload.
I want to implement a separate independent search component which returns the search results to all other components. The computed function looks like this:
get computedSports () {
if (!this.searchModel || this.searchModel.length === 0)
return this.sports
else
return this.fuseSearch.search(this.searchModel)
}
This is how I am trying to pass the value returned by computed function to its parent component in the child template:
#input="$bus.$emit('computed-sports', computedSports)"
In the parent component, this is how I am trying to access the value of the child's computed function:
v-on:computed-sports=""
I am not quite sure how to access the value here. Could anyone help me out in this?
Thanks!
The argument to a v-on should be a method or inline function that takes the payload as an argument. For example
v-on:computed-sports="handleComputedSports"
and your method might be defined
handleComputedSports(theValue) {
console.log("The value is", theValue);
}
There's an example in this section of the documentation. Your emit is fine. The fact that the value comes from a computed makes no difference to anything.
I've created on form in child component. After submitting that form using jquery ajax method ($.ajax) I am retriving some data in json format. I want to put that data in my parent component's state. So, is there any method in react.js for passing value or data from child component to its parent component?
Thank you..
The way to do this without some kind of Flux implementation is to create a function on the parent element that handles the response/data from the child and pass that function as a prop. Then call that function from the child. Something like this:
Parent:
handleResponse(data) {
console.log(data)
}
render() {
return(
<div>
<Child handleResponse={this.handleResponse} />
</div>
);
}
then in the child:
handleAjax() {
$.get(url).then( (response) => {
this.props.handleResponse(response)
});
}
this all assumes ES6 syntax. Using ES5 you're going to have to use bind or var that = this to scope everything correctly.