I am trying to pass a number to a React component but it is getting parsed as string (jsfiddle). How do I make React understand that I am passing a number? Should I cast the string to a number in the component?
var Rectangle = React.createClass({ render: function() { return <div> <div>{this.props.intValue + 10}</div> <div>{this.props.stringValue + 10}</div> </div>; } }); React.render(<Rectangle intValue="10" stringValue="Hello" /> , document.getElementById('container'));
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
For passing the data from the child component to the parent component, we have to create a callback function in the parent component and then pass the callback function to the child component as a prop. This callback function will retrieve the data from the child component.
You can pass a component as props in React by using the built-in children prop. All elements you pass between the opening and closing tags of a component get assigned to the children prop.
To pass data from child to parent component in React: Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent .
It seems that in case of integers (and actually for strings as well) I should be passing the numbers via {}
like so:
React.render(<Rectangle intValue={10} stringValue={"Hello"} />, document.getElementById('container'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With