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: ".png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

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

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./intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

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

• javascript
• json
• reactjs
• react-native

2 Answers 2

A couple things:

1. You're passing an array as the mp prop, but then attempting to access it like an object.

2. You need to remove the quotes from the <img> src attribute:

3. 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./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./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')
);

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