Menu
I am trying to pass two argument using props in ImageText component.
I am not sure if it is right method or I have to create a map and then pass it.
import React, { PropTypes, Component } from 'react' const ImageText = () => ( <div className="img-with-text"> <img className="img" src={props.imageUrl} /> <p className="txt">{props.imageText}</p> </div> ); export default ImageText; Calling this component from another as follows
<ImageText imageUrl="/js.com" imageText="food"/> But is throwing error as
Uncaught (in promise) ReferenceError: props is not defined at ImageText 
406
Method 1: We can make a separate method for the event and call all the props method in that method. Method 2: We can create an anonymous function and call all the props method inside the anonymous method.
Props passing. As the code above demonstrates, you can pass props between components by adding them when the component is being called, just like you pass arguments when calling on a regular JavaScript function .
Just call an alert method in the childToParent function and pass that function as a prop to the child component. And in the child component, accept the childToParent function as a prop. Then assign it to an onClick event on a button. That's it!
In your case issue with you are using "Arrow functions" which needs to pass params inside brackets
const ImageText = () => ( Should be
const ImageText = (props) => ( Now
let props = { imageUrl:"/js.com", imageText:""food"" } <ImageText {...props} /> Access inside ImageText like
{props.imageUrl} or {props.imageText} When you define your component like that, you need to pass your props as parameters to the anonymous function:
const ImageText = ({imageUrl, imageText}) => ( ... rest of the code ... );
30
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
