Adding image to react component

Question

I'm learning React JS and wanted to get my hands dirty. I'm following the tutorial in the docs that builds a simplistic comment system.

I've followed a similar component structure that the tutorial follows:

PostBox

PostList
- Post

Here is the main.js:

    var Post = React.createClass({
      rawMarkup: function() {
        var md = new Remarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return {
          __html: rawMarkup
        };
      },

      render: function() {
        return ( < div className = "post" >
          < h2 className = "commentTitle" > {
            this.props.title
          } < /h2> < span dangerouslySetInnerHTML = { this.rawMarkup() } / > < /div>
        );
      }
    });

    var PostList = React.createClass({
          render: function() {
            var postNodes = this.props.data.map(function(post) {
              return ( < Post title = {
                  post.title
                } > By: {
                  post.by
                } < img src = {
                  'placeholder_path'
                }
                /> </Post > );
            });
            return ( < div className = "postList" > {
                postNodes
              } < /div>);
            }
          });

        var PostBox = React.createClass({
          loadPostsFromServer: function() {
            $.ajax({
              url: this.props.url,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({
                  data: data
                });
              }.bind(this),
              error: function(xhr, status, err) {
                console.log("error " + data);
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },
          getInitialState: function() {
            return {
              data: []
            };
          },
          componentDidMount: function() {
            this.loadPostsFromServer();
            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
          },
          render: function() {
            return ( < div className = "postBox" >
              < PostList data = {
                this.state.data
              }
              /> </div >

            );
          }
        });

        ReactDOM.render( < PostBox url = "/api/posts"
          pollInterval = {
            2000
          }
          />,
          document.getElementById('content')
        );

How do I add an image to the Post component? I am getting that rendered as [object] in the browser?

why placeholder_path is between quotes? did you looked at the generated html to see what is the src value of the img html tag? — Caputo
– Caputo, Commented Jul 19, 2016 at 15:03
Also you need key in the loop for postNodes just to be sure. — nyumerics
– nyumerics, Commented Jul 19, 2016 at 15:04
What do you use to test ? Edit your question with the markdown used. — Emrys Myrooin
– Emrys Myrooin, Commented Jul 19, 2016 at 15:08

tobiasandersen · Accepted Answer · 2016-07-19 15:27:24Z

Your Post (and PostList) component is a bit weird. Are you trying to convert it to markdown? Or why are you using Remarkable like that?

A better way to this (without Remarkable), would look something like:

PostList:

var PostList = React.createClass({
  render: function() {
    var postNodes = this.props.data.map(function(post) {
      return (
        <Post 
          title={post.title}
          author={post.by}
          imageSrc='placeholder_path'
        />
      );
    });
    return ( 
      <div className="postList">
        {postNodes}
      </div>
    );
  }
});

The main difference here is that you send down all information needed as props to the Post component, rather than other elements. It's better to let each component take care of how things render in it. Now your Post component can look like this instead:

Post:

var Post = React.createClass({
  render: function() {
    return (
      <div className="post">
        <h2 className="commentTitle">{this.props.title}</h2> 
        <span>By: {this.props.author}</span>
        <img src={this.props.imageSrc} />
      </div>
    );
  }
});

Collectives™ on Stack Overflow

Adding image to react component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related