nyhunter77 nyhunter77 - 3 months ago 7
React JSX Question

What's the best way to handle Right Left Logic in a news article layout in React JS?

So I've got some cumbersome code to handle a bunch of conditions in React JS.

Mainly to test if there is a Hero layout vs List Layout and then whether to place the image on the right or left.

I wasn't allowed to separate these into smaller or separate components so I'm wondering if there is a better way you guys would handle this logic instead of all these ternaries? I also use React Bootstrap for the Col feature as you will see. Is there a better way to handle these types of situations? I just placed what I thought was the pertinent code, hopefully it's good enough. Thanks!

<div className={cellClassName}>
{layout === "hero" && thumbnailAlignment === "right" && showThumbnails && newsImage ?
<Col className="textContainer" md={6} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
{layout !== "hero" && thumbnailAlignment === "right" && showThumbnails && newsImage ?
<Col className="textContainer" md={10} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
{(thumbnailAlignment === "right" && !showThumbnails) || (thumbnailAlignment === "right" && !newsImage) ?
<Col className="textContainer" md={12} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
{layout !== "hero" && showThumbnails && newsImage ? <Col md={2} sm={12} className="Item-imageCell">
<div className={imageContainerClassName} style={customBackgroundStyles}>
{newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : null}
</div>
</Col> : null}
{layout === "hero" && showThumbnails && newsImage ? <Col md={6} sm={12} className="Item-imageCell">
<div className={imageContainerClassName} style={customBackgroundStyles}>
{newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : null}
</div>
</Col> : null}
{layout === "hero" && thumbnailAlignment === "left" && showThumbnails && newsImage ?
<Col className="textContainer" md={6} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
{layout !== "hero" && thumbnailAlignment === "left" && showThumbnails && newsImage ?
<Col className="textContainer" md={10} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
{(thumbnailAlignment === "left" && !showThumbnails) || (thumbnailAlignment === "left" && !newsImage) ?
<Col className="textContainer" md={12} sm={12}>
<ItemTextArea headline={headline}
previewText={previewText}
showDescription={showDescription}
showBylines={showBylines}
/>
</Col> : null}
</div>

Answer

You have a lot of repeated code. It would be great if you can separate it into components but since you can't, you can just put them as an object in your render method before return.

For example, this code is repeated thrice:

    <ItemTextArea headline={headline}
      previewText={previewText}
      showDescription={showDescription}
      showBylines={showBylines}
    />

In your render function, you can do:

render() {
  const customTextArea = <ItemTextArea headline={headline}
                           previewText={previewText}
                           showDescription={showDescription}
                           showBylines={showBylines}
                         />

  return (
   <div className={something}>
     {someCondition && customTextArea}
   </div>
   <div className={something}>
     {someCondition && customTextArea}
   </div>
   <div className={something}>
     {someCondition && customTextArea}
   </div>
  );
}

As for the use of ternary conditions, you may handle that outside of the return call as well.

Comments