Passing multiple props to React component

Question

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 

Answer 1

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} 

Answer 2

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 ... );