Combining function calls and HTML tags in NEXT in JavaScript

Question

Let's say that I have a function called Foo() which outputs "Hello world!", and I want to make a function called Bar() which takes the output of Foo() and bolds it. Desired output:

Hello world!

Things I have tried:

function Bar() {
    return <b>Foo()</b>;
}

Output: Foo()

function Bar() {
    var f = <b>Foo()</b>;
    return f;
}

Output: Foo()

function Bar() {
    var f = Foo();
    return <b>f</b>;
}

Output: f

function Bar() {
    return "<b>" + Foo() + "</b>";
}

Output: <b>[object Object]</b>

What do I need to do to get Hello world! as the output?

Titus · Accepted Answer · 2019-06-04 01:18:43Z

2

If you want to include a string in JSX, you'll have to add it to a curly braces parentheses. Here is an example:

function Bar() {
  return <b>{ Foo() }</b>;
}

answered Jun 4, 2019 at 1:18

Titus

22.6k1 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Franke · Accepted Answer · 2019-06-04 01:19:19Z

0

I figured out how to do it, though it's not obvious to someone coming from C# and C++.

You need to surround all code declared between HTML tags with curly braces, like this:

function Bar() {
    return <b>{Foo()}</b>;
}

The code {Foo()} will run the function Foo and get its output. You can also put variables here, such as having var myfoo = Foo(); on the line above, then {myfoo} will resolve to the same output.

answered Jun 4, 2019 at 1:19

Aaron Franke

4,2927 gold badges41 silver badges61 bronze badges

Comments

allenwhitedev · Accepted Answer · 2019-06-04 01:21:28Z

0

You can create a element using the DOM api and set its .innerText property to the value returned by the Foo() function:

function Bar() {
  const boldElem = document.createElement("B");
  return boldElem.innerText = Foo()
}

answered Jun 4, 2019 at 1:21

allenwhitedev

162 bronze badges

Collectives™ on Stack Overflow

Combining function calls and HTML tags in NEXT in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related