Clash Royale CLAN TAG#URR8PPP

Pass child data to parent?

I would like to pass data from a child component to the parent.

Here is my code: https://codesandbox.io/s/018488478p

In my child component I have this const = priceShown that I would like to display in the parent component. As so:

const = priceShown

<h2>Price:priceShown</h2>

<h2>Price:priceShown</h2>

I have tried placing functions in the parent then passing them as a props to the child so I can have access to const = priceShown as it will live in the parent but i comes up as undefined. Here is that code: https://codesandbox.io/s/14vyy31nlj

const = priceShown

i

i

2 Answers
2

You can instead keep the state in the parent and pass down a function as prop that will be called from the child component with the appropriate arguments that will update this state in the parent.

Example

class App extends React.Component
state =
evenSelected: null
;

handleSelectL1 = i =>
this.setState(
evenSelected: i,
oldSelected: null
);
;

render()
const product = [

name: "one",
price: 1
,

name: "two",
price: 2
,
,

name: "three",
price: 3

];

const evenIndex = this.state.evenSelected;

return (
<div>
<Child
product=product
handleSelectL1=this.handleSelectL1
evenIndex=evenIndex
/>
<h2>Price: </h2>
</div>
);



class Child extends React.Component
render()
const product, evenIndex = this.props;

const priceShown = product[evenIndex] && product[evenIndex].price;

return (
<div>
product.map((p, i) =>
return (
<div
key=p.id
className=evenIndex === i ? "selectedRBox" : "selectorRBox"
onClick=() => this.props.handleSelectL1(i)
>
<h1 className="selectorTextL">
p.name evenIndex === i && "selected!"
</h1>
</div>
);
)
</div>
);



ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

In react, the data flow is unidirectional i.e from parent to child.
If Parent Component wants to access Child Component data, you can use refs (though it's not recommended).

Eg:
Lets say you have a function getPrice() defined in your Child component.

class Parent extends React.Component
constructor(props)
super(props);
this.getPrice = this.getPrice.bind(this);
;

getPrice()
let price = this.refs.child.getPrice();
;

render()
return(
<Child
ref="child"
/>
)
;



And in your Child component,

class Child extends React.Component
constructor(props)
super(props);
this.state =
price: "100"

this.getPrice = this.getPrice.bind(this);
;

getPrice()
return this.state.price
;



Hope this helps.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.