Trying to pass JSON object REACTJS not working

Question

I am starting to get involved in ReactJS, I am trying to pass to my tag a JSON object so then I can show it in the UI but it keeps saying that element is not found. Any help on this? Or why the props object is not having the JSON object? Thanks in advance

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="img-container">
            <img src="{this.props.placementImage}" />
        </div>
    );
  }
});

var MP = [
    {
        id: "MP1001",
        placementImage: "https://www.aexp-static.com/intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

ReactDOM.render(
        <CommentBox mp={MP}/>,
        document.getElementById('content')
);

rossipedia · Accepted Answer · 2016-01-20 20:47:50Z

3

A couple things:

You're passing an array as the mp prop, but then attempting to access it like an object.
You need to remove the quotes from the <img> src attribute:
You need to access the actual mp prop

For reference, I've created a JSBin example from your code that fixes these issues: http://jsbin.com/bohoqa/edit?html,js,output

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="img-container">
            <img src={this.props.mp.placementImage} />
        </div>
    );
  }
});

var MP = [
    {
        id: "MP1001",
        placementImage: "https://www.aexp-static.com/intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

ReactDOM.render(
        <CommentBox mp={MP[0]}/>,
        document.getElementById('content')
);

answered Jan 20, 2016 at 20:47

rossipedia

59.8k10 gold badges95 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jorge Over a year ago

Thanks! I thought as I was reading that the object will be available in the props reactJS object but seems that I even have to do reference to props.mp. Thanks for the information

d-vine Over a year ago

You could use the JSX spread operator to achieve exactly what you want. <CommentCox { ...MP[0] } /> See facebook.github.io/react/docs/jsx-spread.html for more.

Jorge Over a year ago

I am trying for the moment no to depend on some external libraries and rather to do everything manually using javascript. Thanks for the help

Train · Accepted Answer · 2016-01-20 20:53:44Z

0

change

<img src="{this.props.placementImage}" />

to

<img src={this.props.mp[index].placementImage} />

You have to pass them as objects {} not "{}"

edit: I did not notice it was an array

edited Jan 20, 2016 at 20:53

answered Jan 20, 2016 at 20:47

Train

3,5363 gold badges33 silver badges65 bronze badges

1 Comment

Jorge Over a year ago

That was my issue, beside that the .mp was missing, I thought it was already in the props object. Thanks

Collectives™ on Stack Overflow

Trying to pass JSON object REACTJS not working

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related