reactjs render span tag with ternary operator

Question

I need to render a number with bigger font in a span tag in Spanish.

I have a React.js code like this with ternary operator:

<div>
{togo !== 0
  ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > 1 ? ` questions remaining` : ` left!`}</div>)
  : ("")
}
</div>

In words: if there is togo, render div with span, if togo > 1, render questions remaining, if not render left.

English:

10 questions remaining

Spanish:

Quedan 10 preguntas

The problem is: the number in Spanish, is in the middle of the sentence. How can I render the span tag so the number is displayed bigger than the text?

The number {togo} is in its own span, so maybe edit the display-4 css class? No idea how css works in react. But I'm confused. Is the question: how do I make the number styling bigger? Or is the question: how do I add the spanish version? — Shilly, Jul 26 '18 at 14:59
Try solving it using css. You could either add an extra class that you can style, or style that same class if it used for nothing else. For example, you can try font-size: 150% to make it bigger than surrounding text by 150%. — Ahamad I Milazi, Jul 26 '18 at 14:59
@Shilly : the question is: how do I add the Spanish version with the difference of the grammar structure. With English, I can easily append the text after the number. @ Asyene Milazi : I'm not quite sure how I'd inject a class / tag into the logic, hence the question. — Viet, Jul 26 '18 at 15:07

score 1 · Accepted Answer · answered Jul 26 '18 at 14:58

You could split your logic up into three separate branches, and use the ternary for everything that will be returned so you can control the ordering.

Example

function App(props) {
  const { lang, togo } = props;

  if (togo === 0) {
    return null;
  } else if (togo === 1) {
    return (
      <div>
        <span className="display-4">{togo}</span> left!
      </div>
    );
  } else {
    return lang === "es" ? (
      <div>
        Quedan <span className="display-4">{togo}</span> preguntas
      </div>
    ) : (
      <div>
        <span className="display-4">{togo}</span> questions remaining
      </div>
    );
  }
}

ReactDOM.render(<App lang="es" togo={2} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Thank you. Your solution seems like a good idea. I'll try it. — Viet, Jul 26 '18 at 15:08
I did upvote your answer. I'll implement your suggestion and mark it the correct answer. — Viet, Jul 26 '18 at 15:10

swy · Answer 2 · 2018-07-26T15:34:57.540

You can use the format print of string as in JavaScript equivalent to printf/string.format :

var translations = {
    "en": {
        "questions_remaining": "<span className=\"display-4\">{0}</span> questions remaining",
        "left": "<span className=\"display-4\">{0}</span> left"
    },
    "es": {
        "questions_remaining": "Quedan <span className=\"display-4\">{0}</span> preguntas",
        "left": "<span className=\"display-4\">{0}</span> left"
    }
},
    togo = 10;

if (!String.prototype.format) {
    String.prototype.format = function() {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function(match, number) {
            return typeof args[number] != 'undefined'
                ? args[number]
                : match
                ;
        });
    };
}

ReactDOM.render(<div>
        {togo !== 0
            ? <div className="text-center" dangerouslySetInnerHTML={{__html: togo > 1 ? translations["en"]["questions_remaining"].format(togo): translations["en"]["left"].format(togo)}}></div>
            : ""
        }
    </div>, document.getElementById("english"));
    
ReactDOM.render(<div>
        {togo !== 0
            ? <div className="text-center" dangerouslySetInnerHTML={{__html: togo > 1 ? translations["es"]["questions_remaining"].format(togo): translations["es"]["left"].format(togo)}}></div>
            : ""
        }
    </div>, document.getElementById("spanish"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="english"></div>
<div id="spanish"></div>

With such method, you don't need to put attention to the code, if other languages are required or the text should be changed. If the translation can be generated from server, e.x a CMS system, you don't need to write such translations in the react codes.

reactjs render span tag with ternary operator

2 Answers2