Question 204686 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React JS-components showing [object Object] instead of JSX

I’m creating a simple text editor with features like predictive texting, autocorrection etc. I’m trying to change the format of parts of the user’s input that are within quotations but for some reason the react component keeps showing [object Object] instead of rendering the JSX element. I’m definitely doing something wrong. Any and all help is deeply appreciated

Here’s the function handling this feature

import React from "react"

export default function HandleMonospace(ref, setText){
    let text = ref
    if(text){
        const arraytext= text.split(' ')
        let newText= arraytext.map((item)=>{
            if(/"[^"]+"/.test(item)){
                let moditem= item.split('')
                moditem.splice(0, 1)
                moditem.splice(moditem.length-1, 1)
                moditem=moditem.join('')
                return <code>{moditem}&nbsp;</code>
            }
            else{
                return `${item} `
            }
        })
        newText=newText.join('')
        setText(newText)
    }
}

here, ref represents ref.current.innerHTML

the component being rendered to, is contentEditable

for
Today seems to be a "good" day because the sky is somewhat "clear"

it renders
Today seems to be a [object Object]day because the sky is somewhat [object Object]

I’ve tried switching datatypes
Deferring from using state variables to store and show the input
Using textarea element

Tags:

2

Answers


  1. 0

    The issue is newText is supposed to return an array but the else block is trying to add a space to it.

    else {
   return `${item} ` // incorrect format 
   return item
} 
/* other code */

// join works on array, so newText should always return an array
newText = newText.join('') 
setText(newText)
    Login or Signup to reply.
  2. 0

    It’s the join() that causing the [object Object].

    If you wrap your moditem in a <code> block, you can’t do join() since that will convert it to a string, resulting in the [object Object].

    Since React can render arrays, just remove the join() and render the array returned by HandleMonospace

    Small demo:

    • Including the fix above
    • Added some color to the <code> block to make it more clear
    const Example = () => {

    function HandleMonospace(ref){
        let text = 'Today seems to be a "good" day because the sky is somewhat "clear"';
        if(text){
            const arraytext= text.split(' ')
            let newText= arraytext.map((item)=>{
                if(/"[^"]+"/.test(item)){
                    let moditem= item.split('')
                    moditem.splice(0, 1)
                    moditem.splice(moditem.length-1, 1)
                    moditem=moditem.join('')
                    return <code>{moditem}&nbsp;</code>
                }
                else{
                    return `${item} `
                }
            })
            return newText;
        }
    }
    
    return (
        <div>
            <h1>{'Example'}</h1>
            <em>{HandleMonospace()}</em>
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));
    code { color: red; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search