0

TLDR; I need to be able to render child components in React even if a property of this.props is missing.

I have an React app built with Yahoo's Flxubile. The app fetches data from a Wordpress site with WP REST API. Sometimes an image might be missing or something else from the API, this causes the client to break. Here's an example:

I have a file called Articles.js which is connected to ArticlesStore which holds my articles. I then render one Article.js for every article I have and pass props like this:

{   this.props.articles.map(function(el, index) {                                           
      return <Article key={index} article={el} />
    })
}

Everything is ok here, but then in my Article.js when I try to access properties that is not set I get the following:

Uncaught TypeError: Cannot read property 'sizes' of undefined

This is the line which causes the error:

<img src={this.props.article.meta_fields.image.sizes.large} />

This happens when a image is missing from an article. I understand the javascript error of course but I want to render the Article.js component event if a image url is missing from the API/Store. I have tried the following solutions, but it causes too much clutter and no control:

  1. Conditional set if we have the prop i.e. {this.props.article.meta_fields.image ? this.props.article.meta_fields.image.sizes.large : "imagemissing.png"}
  2. Setting defaultProps. This does not work because passed properties from parent to child overwrites defaultProps.

Maybe I should try something else than passing props from parent to child? Have a ArticleStore where I can set default values for every article? How would you do it?

sebastiansson
  • 177
  • 14
  • 1
    Can't you just make a condition in render as to whether or not the prop is there, and return it without the image in case it isn't? – cbll Apr 25 '17 at 09:11
  • I had a same problem and solved it with giving default values, why does it give no control? – donquixote Apr 25 '17 at 09:14
  • @cbll Then I have to make like 10 conditionals for every component I have. Would be really cluttered and I would have to spend a lot of time just to write conditionals. – sebastiansson Apr 25 '17 at 09:19
  • @donquixote default values in the store or component? Because I can't use defaultProps because it gets overwritten in the child. – sebastiansson Apr 25 '17 at 09:20
  • in component @SebastianMarcusson – donquixote Apr 25 '17 at 09:21
  • For nested property merging with defaults, have a look at e.g. http://stackoverflow.com/questions/38491840/merge-nested-objects-without-mutating – le_m Apr 25 '17 at 09:24
  • @donquixote Hmm, maybe. But the object is pretty big, so setting every nested property would be very time consuming. – sebastiansson Apr 25 '17 at 09:43

1 Answers1

2

If you want to provide a nested structure as a prop (as with article) you'll want to be able to rely on the structure always being pretty much the same. In this case it won't be, sometimes the meta_fields does not have an image-attribute (as your TypeError suggests).

In your case I would consider pulling out the things you actually need/use in the Article component from the article object and pass those as props.

Say that your Article only uses title, body, and image. Then just pass those as props.

<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

One might think that the extra props constitutes more "clutter" here, but given the choice between clutter and TypeError, I choose clutter.

And if you don't want to reinvent the wheel. The problem of accessing data in a nested structure like this have been solved before.

// Lodash
_.get(article, 'meta_fields.image.sizes.large', 'default_image.jpg')
// Ramda
_.pathOr('default_image.jpg', ['meta_fields', 'image', 'sizes', 'large'], article)
Carlsson
  • 2,584
  • 1
  • 14
  • 9