CODEWITHSUNDEEP
javascriptreactjsjsx
Rakesh Peela
Rakesh Peela

Reputation: 41

Join JS String Array and JSX element

I'm trying to join "8.8.8.8".split('.') JS Array of elements with JSX element <span className="bullet">•</span>.

Rendering this in the React environment gives 8[object Object]8[object Object]8[object Object]8.

Any solution to this ?

Upvotes: 2

Views: 947

Answers (4)

vol7ron
vol7ron

Reputation: 42149

The issue is that join tries to convert the object (React element) to a string, since join is a string function. [object Object] is the result of the toString method on that object. Instead, you should return an array.

Here's an example that iterates over each character of the string and replaces a specific character with a React element:

function App(props) {
  let foo = '8.8.8.8'
  let replaceChar = '.'
  let output = [...foo].map(char=>(
    char === replaceChar ? <span className="bullet">•</span> : char
  ))
  
  return <React.Fragment>{output}</React.Fragment>
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>

<div id="app">Error Encountered</div>

Upvotes: 0

c-chavez
c-chavez

Reputation: 7506

Since this is for React, it can be done like this.

In your Component:

render(){
    let myArray = "8.8.8.8".split('.');

    return (
    <div>
      {myArray.map((item, index) => {
        if (index !== myArray.length -1 ) {
            return <span key={index}>{item}<span className="bullet">•</span></span>
           } else {
            return <span key={index}>{item}</span>
           }
         })}
    </div>
    );
}

Basically what is being done here is:

  • Create the array (or get it from other function).
  • Loop over the array items.
  • Create a span object for the numbers and the dot, except for the last one.
  • All being done in the render of the component.

Result is:

8•8•8•8

In html:

<div>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8</span>
</div>

Here's a Sandbox to see it working.

You could receive the array as props of the component as well and create a static component to always render something similar.

remove:

let myArray = "8.8.8.8".split('.');

change

myArray.map

to

this.props.myArray.map

call like this:

<NumberDotComponent myArray={"8.8.8.8".split('.')}/>

Upvotes: 0

Philip Pavo
Philip Pavo

Reputation: 159

Try it

"8.8.8.8".split('.').reduce((res, item) => {
    if (!res) {
        return [item];
    }

    return [...res, <span className="bullet">•</span>, item];
})

Upvotes: 1

Denis S Dujota
Denis S Dujota

Reputation: 611

I assume you are trying to loop and then render a span with a bullet per iteration.

I am also going to assume you want a span so it is an inline element?

I would not use the character bullet, but rather use something like:

<ul>
    // loop through your array here
    <li className="bullet" style="display:inline;"> 
         arrayElement 
    </li>
</ul>

alternatively, if you MUST use a bullet point, just specify the actual code for the bullet rather then the symbol

• (Circular Bullet Point) code: & #8226; or & bull;

Upvotes: 0

Related Questions