title: Reactjs how to convert string to [object Object]
body: <p>I have a <code>menuItem</code> component and its props is a <strong>Icon</strong> component created by me and called <code>FontIcon</code>.</p>
  
  <p>And in <code>menuItem</code> props you can pass a name of the icon as a string, for example: <code>leftIcon="face"</code> but you can also pass a code for the component like this: <code>leftIcon='&lt;FontIcon style={{color:"red"}} className="face" /&gt;'</code>.</p>
  
  <p>In the first case, all works perfectly, the props is passed to the variable where is code for the component:</p>
  
  <p><code>leftIcon = &lt;FontIcon size={_props.fontSize} className={_props.leftIcon} /&gt;;</code></p>
  
  <p>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:</p>
  
  <p><code>leftIcon = _props.leftIcon.replace(/\/&gt;$/, " size={_props.fontSize}/&gt;");</code></p>
  
  <p>Here I've got <code>if</code> to check what has the user passed:</p>
  
  <pre><code>if (_props.leftIcon.match(/&lt;.+\/&gt;/)) {
      leftIcon = _props.leftIcon.replace(/\/&gt;$/, " size={_props.fontSize}/&gt;");
  } else {
      leftIcon = &lt;FontIcon size={_props.fontSize} className={_props.leftIcon} /&gt;;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/pBjat.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pBjat.jpg" alt="enter image description here"></a></p>
  
  <p>So I've consoled log this and it's what I got:</p>
  
  <p><a href="https://i.stack.imgur.com/zZBZK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZBZK.jpg" alt="enter image description here"></a></p>
  
  <p>The <code>typeof</code> this first is <strong>object</strong> but this second one is <strong>string</strong>.</p>
  
  <p>So what can do to make this second way works?</p>