CODEWITHSUNDEEP
javascripthtmlreactjs
js_248
js_248

Reputation: 2112

Passing multiple props to React component

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

Upvotes: 29

Views: 174180

Answers (6)

Ershad Qaderi
Ershad Qaderi

Reputation: 471

Creating:

const ImageText = ({ imageUrl, imageText }) => (
  <div className="img-with-text">
    <img className="img" src={imageUrl} />
    <p className="txt">{imageText}</p>
  </div>
);

export default ImageText;

Using; when you have already defined imageUrl and imageText somewhere before the return keyword:

<ImageText {...{imageUrl, imageText}}

Upvotes: 1

Abhigyan
Abhigyan

Reputation: 385

Passing down multiple props in reactJS can be done using either of following ways:

// in App.js
<Modal post= {postProps} user={userDetails}/>

// in Modal.js
const Modal = (props) => {
   const title = props.post.title
   const username = props.user.username
   // rest of the code..
}

in above example props (in Modal.js) forms an object with keys named post and user, thus you can access them like objects.

Another way would be:

// in App.js
<Modal post={postProps}/>

// in Modal.js
const Modal = ({post}) => {
   const title = post.title
   // rest of the code..
}

in this example post object has been imported explicitly in Modal.js

Final Remark : With first approach it gets very clear looking at your code that what has been passed down as props from parent element and might be clear to read.

While with second approach i argue that, it is better to use in scenarios where its just one prop to pass, since you don't have to write props. everytime

Upvotes: 3

DirtyRedz
DirtyRedz

Reputation: 566

When using a functional component (when you don't use a class) you must pass the props as an argument into to the function.

You can pass as many props add you need into a component.

const ImageText = (props) => (...

If using a standard component (as a class) you would call a prop with

this.props

Upvotes: 3

Cornel Janssen
Cornel Janssen

Reputation: 681

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

Upvotes: 7

BEJGAM SHIVA PRASAD
BEJGAM SHIVA PRASAD

Reputation: 2241

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}

Upvotes: 70

Khalid Azam
Khalid Azam

Reputation: 1643

you are passing the props to dump component. it's not react component. pass the props to dump as function argument.

> import React, { PropTypes, Component } from 'react'
> 
> const ImageText = ({imageUrl, imageText}) => (
>     <div className="img-with-text">
>         <img  className="img" src={imageUrl} />
>         <p className="txt">{imageText}</p>
>     </div> );
> 
> export default ImageText;

Upvotes: 1

Related Questions