Display a React Component as a string

Question

I'm trying to display a helper string text with a react component. The string is part of an array of messages that get displayed on a screen. In this particular string, I'm using an icon for part of the string. The icon is a component. However, I keep getting back [object, object].

What I've tried...

`Click on the ${(<EyeIcon />)} to view the password you have entered.`,

Also just displaying the icon,

<EyeIcon />

I've even tried making the component into a export function.

EyeIcon()

But I can't seem to get it to appear.

EyeIcon is a component and not a string. It is the expected behavior. Now, if you move your string to JSX code, this can work. Everything depends on where you want to show this string. Is it part of some JSX? Can you share the code where you use this string? — Sanish Joseph
– Sanish Joseph, Commented Sep 22, 2021 at 15:33
No, it's part of just a regular JavaScript helper function I have. There is a series of messages that are in an array that I have that get displayed on a screen. For one message I need an icon which is a component. — User1990
– User1990, Commented Sep 22, 2021 at 15:35
What are you expecting in the place of ${(<EyeIcon />)}? Its HTML? — Sanish Joseph
– Sanish Joseph, Commented Sep 22, 2021 at 15:36
You can't just interpolate a component instantiation with a string template. Move the jsx outside your text block; <div> Click on the <Icon /> </div> — Dupocas
– Dupocas, Commented Sep 22, 2021 at 15:38

windmaomao · Accepted Answer · 2021-09-22 15:40:29Z

Ok, there's some difference between a function, and a function component.

function

  const eyeIcon = s => `Click on ${s}`

This is a function that you can plugin to output a new string based on s.

function component

  const EyeIcon = ({ s }) => <span>Click on {s}</span>

This is a function component that you can use via

  const Title = () => {
    return <EyeIcon s="abc" />
  }

A function component is a function, but it needs to be invoked to produce an element (not a string), therefore the return statement is not a string (Even you output a string there, it'll be wrapped into an element for you).

NOTE:

it's a bit confusing if it's your first time into functional programming, but just watch out for the input and output. The function component input argument is a props object, and it returns a DOM-like element (called React element). There's quite a bit ES6 syntax to confuse you further.

Tomasz Czechowski · Accepted Answer · 2022-03-07 22:32:42Z

1

If this string is part of some conditions try this option:

<>Click on the (<EyeIcon />) to view the password you have entered.</>

answered Mar 7, 2022 at 22:32

Tomasz Czechowski

6418 silver badges11 bronze badges

Collectives™ on Stack Overflow

Display a React Component as a string

2 Answers 2

function

function component

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

function

function component

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related