Reactjs how to convert string to [object Object]

Question

I have a menuItem component and its props is a Icon component created by me and called FontIcon.

And in menuItem props you can pass a name of the icon as a string, for example: leftIcon="face" but you can also pass a code for the component like this: leftIcon='<FontIcon style={{color:"red"}} className="face" />'.

In the first case, all works perfectly, the props is passed to the variable where is code for the component:

leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;

But this second way is not working. When the user passes all code I need to add something to this(this size value like above), at this point this adding works:

leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");

Here I've got if to check what has the user passed:

if (_props.leftIcon.match(/<.+\/>/)) {
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");
} else {
    leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;
}

But in this second way, I'm getting a string and it doesn't work. There is no icon, but there is a string with code:

So I've consoled log this and it's what I got:

The typeof this first is object but this second one is string.

So what can do to make this second way works?

score 0 · Answer 1 · answered Feb 07 '17 at 16:40

0

If this code is in the render portion this should work;

if (_props.leftIcon.match(/<.+\/>/)) {
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");
} else {
    leftIcon = (<FontIcon size={_props.fontSize} className={_props.leftIcon} />);
}

Note the parenthesis.

answered Feb 07 '17 at 16:40

J. Mark Stevens

4,911
2
13
18

unfortunately, it doesn't work because you've worked out this working part, this first `if` doesn't working because it's string. – Karol Feb 07 '17 at 16:47
I missed that you were passing it as a prop. In that case you need to pass the type as a prop and do the rest in menuItem. – J. Mark Stevens Feb 07 '17 at 17:41
I'm sorry but I don't understand what do you mean: "pass the type as a prop". – Karol Feb 07 '17 at 17:51
Instead of passing the icon as a prop pass the _props.leftIcon and _props.fontSize and do the if in menuItem. – J. Mark Stevens Feb 07 '17 at 20:46
Basically it's a first way – Karol Feb 07 '17 at 20:48
Sometimes I don't read it through. Try with javascript template literals; leftIcon = _props.leftIcon.replace(/\/>$/, ` size=${_props.fontSize}/>`); – J. Mark Stevens Feb 07 '17 at 20:54

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

There's a way to create component from string you can take a look on this answer

But I would suggest you to pass styles and / or class names and other parameters to your component rather then a string and then you could just have:

 return <FontIcon class={condition ? 'firstClass' : 'secondClass'} ... />;

edited May 23 '17 at 10:29

Community

1
1

answered Feb 07 '17 at 16:45

Ivan Leonenko

2,363
2
27
37

Reactjs how to convert string to [object Object]

2 Answers2