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 ?
-
whats your expected output?ashish singh– ashish singh2018-09-08 16:40:19 +00:00Commented Sep 8, 2018 at 16:40
-
8 • 8 • 8 • 8 @ashishsinghRakesh Peela– Rakesh Peela2018-09-08 16:41:26 +00:00Commented Sep 8, 2018 at 16:41
-
dot is html element is it ?ashish singh– ashish singh2018-09-08 16:42:27 +00:00Commented Sep 8, 2018 at 16:42
-
@ashishsingh yes. It is <span className="bullet">•</span>Rakesh Peela– Rakesh Peela2018-09-08 16:45:28 +00:00Commented Sep 8, 2018 at 16:45
-
but its not string its a JSX element and hence its doing itashish singh– ashish singh2018-09-08 16:46:13 +00:00Commented Sep 8, 2018 at 16:46
|
Show 2 more comments
4 Answers
Try it
"8.8.8.8".split('.').reduce((res, item) => {
if (!res) {
return [item];
}
return [...res, <span className="bullet">•</span>, item];
})
3 Comments
n1stre
You don't actually need
if (!res) { return [item]; }
Philip Pavo
Why? It is required for initialize first element
n1stre
I'm pretty sure '8' is the first element. No?
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;
Comments
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('.')}/>
Comments
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>