0

I have 

var pos = ["a","b"]
pos.unshift(<span className="common">Common Word</span>)
var parts_of_speech = pos.join(', ')

Rendering {pos} prints Common Word properly and I can style the css class. Printing {parts_of_speech} results in [object Object] instead of Common Word being printed.

What can be done to make this do what I would expect or is this the wrong way to go about doing this?

irregular
  • 1,437
  • 3
  • 20
  • 39
  • This might help [https://stackoverflow.com/questions/16816726/converting-an-html-string-to-a-dom-element](https://stackoverflow.com/questions/16816726/converting-an-html-string-to-a-dom-element) – Umesh Aug 16 '17 at 01:57

1 Answers1

0

When you say <span className="common">Common Word</span> in JSX, you are not dealing with a span element. It is actually just a JavaScript function call:

React.createElement(
  "span",
  { className: "common" },
  "Common Word"
);

You can use Babel to get the result above.

So you are getting the result of joining the result of a function with a string.

Your code translate to the following with Babel:

var pos = ["a", "b"];
pos.unshift(React.createElement(
  "span",
  { className: "common" },
  "Common Word"
));
var parts_of_speech = pos.join(', ');

So if React.createElement returns some object, it should have a toString() method that outputs [object Object].

Like this example:

"use strict";

var pos = ["a", "b"];
pos.unshift((function() { return {}; })());
var parts_of_speech = pos.join(', ');

console.log(parts_of_speech)
nbkhope
  • 7,360
  • 4
  • 40
  • 58
  • I want the end result to have a span element with a css class that I can style (while joining it with other normal strings). Is there a simple way to do that or would I have to render that span element separately from the array of Strings? – irregular Aug 16 '17 at 01:24
  • You should make an array of React components (which are just the result of function calls!): `var pos = [a, b];` and then in the render() function's return value you need only say {pos} and React will know how to render an array of JSX "elements". – nbkhope Aug 16 '17 at 01:29
  • You can also map an array of strings to an array of span components like so: `['a', 'b'].map(label => ({label}))` – nbkhope Aug 16 '17 at 01:31
  • Making the array an array of JSX elements sounds like it would work. Just a thought but I wonder if that is the most ideal solution though because it seems to me, this solution would pollute the html with possibly unneeded spans. – irregular Aug 16 '17 at 01:32
  • Then what prevents you from just doing `a,Common Word,b` inside the return value of the render function? – nbkhope Aug 16 '17 at 01:44
  • I guess you have missed " here `pos.unshift("Common Word")` – Umesh Aug 16 '17 at 01:49
  • If the array is empty and I need Common Word then I don't need a comma, if the array is not empty then I need the comma. If Common Word is not needed then simply joining the array with .join(', ') is fine. The best of both worlds is if I can add Common Word to the array then just join everything together. So far it looks like the only way that will happen is if I add a span to every string in the array? – irregular Aug 16 '17 at 01:50
  • @Umesh I tried that but that surprisingly prints out literally that string. the span className.... same with class instead of className. – irregular Aug 16 '17 at 01:50