Mixing
React passing value from child to another parent
0
I have a problem passing value from component named Item to component NavBar. The tree looks like this.
In Item component I have button, that is calling function handleAddToCart
<button onClick={this.handleAddToCart} style={btnStyle} className="btn btn-secondary btn-sm">ADD TO CART</button>
handleAddToCart = () => {
console.log(this.state.price, this);
this.props.changeValue(this.state.price)
};
And in NavBar component I have a function that is supposed to receive price of item
changeValue = (totalPrice) => {
this.setState({
totalPrice: totalPrice
});
};
And then display it
{this.state.totalPrice.toFixed(2)}
the problem is that in Item component function called changeValue is unrecognized. Is it even possible to pass values straight to another child without passing it step by step to parent=>another parent=>child ? How should it be done correctly?
javascript reactjs single-page-application
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
add a comment |
0
I have a problem passing value from component named Item to component NavBar. The tree looks like this.
In Item component I have button, that is calling function handleAddToCart
<button onClick={this.handleAddToCart} style={btnStyle} className="btn btn-secondary btn-sm">ADD TO CART</button>
handleAddToCart = () => {
console.log(this.state.price, this);
this.props.changeValue(this.state.price)
};
And in NavBar component I have a function that is supposed to receive price of item
changeValue = (totalPrice) => {
this.setState({
totalPrice: totalPrice
});
};
And then display it
{this.state.totalPrice.toFixed(2)}
the problem is that in Item component function called changeValue is unrecognized. Is it even possible to pass values straight to another child without passing it step by step to parent=>another parent=>child ? How should it be done correctly?
javascript reactjs single-page-application
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
1
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26
add a comment |
0
0
0
I have a problem passing value from component named Item to component NavBar. The tree looks like this.
In Item component I have button, that is calling function handleAddToCart
<button onClick={this.handleAddToCart} style={btnStyle} className="btn btn-secondary btn-sm">ADD TO CART</button>
handleAddToCart = () => {
console.log(this.state.price, this);
this.props.changeValue(this.state.price)
};
And in NavBar component I have a function that is supposed to receive price of item
changeValue = (totalPrice) => {
this.setState({
totalPrice: totalPrice
});
};
And then display it
{this.state.totalPrice.toFixed(2)}
the problem is that in Item component function called changeValue is unrecognized. Is it even possible to pass values straight to another child without passing it step by step to parent=>another parent=>child ? How should it be done correctly?
javascript reactjs single-page-application
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
I have a problem passing value from component named Item to component NavBar. The tree looks like this.
In Item component I have button, that is calling function handleAddToCart
<button onClick={this.handleAddToCart} style={btnStyle} className="btn btn-secondary btn-sm">ADD TO CART</button>
handleAddToCart = () => {
console.log(this.state.price, this);
this.props.changeValue(this.state.price)
};
And in NavBar component I have a function that is supposed to receive price of item
changeValue = (totalPrice) => {
this.setState({
totalPrice: totalPrice
});
};
And then display it
{this.state.totalPrice.toFixed(2)}
the problem is that in Item component function called changeValue is unrecognized. Is it even possible to pass values straight to another child without passing it step by step to parent=>another parent=>child ? How should it be done correctly?
javascript reactjs single-page-application
javascript reactjs single-page-application
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
edited Jan 1 at 16:12
Maaz Syed Adeeb
2,49221425
2,49221425
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
asked Jan 1 at 14:01
Kamil SienkiewiczKamil Sienkiewicz
154
154
1
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26
add a comment |
1
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26
1
1
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26
add a comment |
1 Answer
1
active
oldest
votes
0
Figured it out.
Button in item component:
onClick={() => this.props.handler(this.state.price)}
Passing values to item in itemsList
{this.props.items.map(item => <Item
key={item.id}
price={item.price}
img={item.img}
imgDesc={item.imgDesc}
itemDesc={item.itemDesc}
handler={this.props.handlePriceChange}
/>)}
In App component function:
handlePriceChange = (priceValue) => {
this.setState({totalPrice: this.state.totalPrice + priceValue});
this.setState({totalItems: this.state.totalItems + 1});
};
and passing function to child (itemsList)
<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>
Finally in navBar:
Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996084%2freact-passing-value-from-child-to-another-parent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Figured it out.
Button in item component:
onClick={() => this.props.handler(this.state.price)}
Passing values to item in itemsList
{this.props.items.map(item => <Item
key={item.id}
price={item.price}
img={item.img}
imgDesc={item.imgDesc}
itemDesc={item.itemDesc}
handler={this.props.handlePriceChange}
/>)}
In App component function:
handlePriceChange = (priceValue) => {
this.setState({totalPrice: this.state.totalPrice + priceValue});
this.setState({totalItems: this.state.totalItems + 1});
};
and passing function to child (itemsList)
<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>
Finally in navBar:
Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
add a comment |
0
Figured it out.
Button in item component:
onClick={() => this.props.handler(this.state.price)}
Passing values to item in itemsList
{this.props.items.map(item => <Item
key={item.id}
price={item.price}
img={item.img}
imgDesc={item.imgDesc}
itemDesc={item.itemDesc}
handler={this.props.handlePriceChange}
/>)}
In App component function:
handlePriceChange = (priceValue) => {
this.setState({totalPrice: this.state.totalPrice + priceValue});
this.setState({totalItems: this.state.totalItems + 1});
};
and passing function to child (itemsList)
<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>
Finally in navBar:
Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
add a comment |
0
0
0
Figured it out.
Button in item component:
onClick={() => this.props.handler(this.state.price)}
Passing values to item in itemsList
{this.props.items.map(item => <Item
key={item.id}
price={item.price}
img={item.img}
imgDesc={item.imgDesc}
itemDesc={item.itemDesc}
handler={this.props.handlePriceChange}
/>)}
In App component function:
handlePriceChange = (priceValue) => {
this.setState({totalPrice: this.state.totalPrice + priceValue});
this.setState({totalItems: this.state.totalItems + 1});
};
and passing function to child (itemsList)
<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>
Finally in navBar:
Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
Figured it out.
Button in item component:
onClick={() => this.props.handler(this.state.price)}
Passing values to item in itemsList
{this.props.items.map(item => <Item
key={item.id}
price={item.price}
img={item.img}
imgDesc={item.imgDesc}
itemDesc={item.itemDesc}
handler={this.props.handlePriceChange}
/>)}
In App component function:
handlePriceChange = (priceValue) => {
this.setState({totalPrice: this.state.totalPrice + priceValue});
this.setState({totalItems: this.state.totalItems + 1});
};
and passing function to child (itemsList)
<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>
Finally in navBar:
Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
answered Jan 2 at 16:12
Kamil SienkiewiczKamil Sienkiewicz
154
154
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996084%2freact-passing-value-from-child-to-another-parent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
1 more way of doing this, is by using Redux, then you won't need to pass through parent
– Abhay Sehgal
Jan 1 at 14:08
probably not implemented properly, I usually think of it as a tree since I don't use Redux yet, a shared state should be at the top of the tree. so the parent of both parents should have the state. updating that single state should update it everywhere.
– comphonia
Jan 1 at 14:31
Take a look at this reactjs.org/docs/lifting-state-up.html if you don't want to use Redux or create a shared state in some parent component.
– Rockey
Jan 1 at 14:36
Which property is passed from parent to child component ?! you should have passed it as a prop. I can't see that. Explain please.
– Tarreq
Jan 1 at 14:52
I ended up passing value from App to NavBar, which is by default 0, but now im stuck on passing price from Item component and updating it in App component. Im trying to call function that is in App component from Item component to update it, but it dosn't see declared parent's function.
– Kamil Sienkiewicz
Jan 1 at 17:26