Unable to Render Link Component React using Foreach-CodePudding

I have an array of words and none words an I'm trying to construct a sentence using the using the values inside the array and make only the words click able.

Below is a sample of the Array. This data is stored in a const called getWordsFromTokens

[
  {
    "type": "non-word",
    "value": ""
  },
  {
    "type": "word",
    "value": "One"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "Saturday"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "when"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "I"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "was"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "young"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "my"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "father"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "and"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "I"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "left"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "house"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "early"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "in"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "morning"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "when"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "it"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "was"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "still"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "blue"
  },
  {
    "type": "non-word",
    "value": "-"
  },
  {
    "type": "word",
    "value": "black"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "outside"
  },
  {
    "type": "non-word",
    "value": ". "
  },
  {
    "type": "word",
    "value": "The"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "grass"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "left"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "wet"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "marks"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "on"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "our"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "shoes"
  },
  {
    "type": "non-word",
    "value": ". "
  },
  {
    "type": "word",
    "value": "In"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "backyard"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "under"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "stones"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "we"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "dug"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "up"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "crawly"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "worms"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "and"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "laid"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "them"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "in"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "a"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "can"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "with"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "lumps"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "of"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "damp"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "dirt"
  }
]

Here is How I'm trying to construct the sentence and make only the words clickable

 getWordsFromTokens.forEach(item => {
        const htmlToAppend = item.type === 'word' ?
          // `<a href='/word/${item.value}'>${item.value}</a>` :
          <Link to="user" params={item.value} >{item.value}</Link>:
          item.value
          
        document.getElementById('new-sentence').innerHTML  = htmlToAppend;
      })

What is rendered on the browser is something that looks like this and not the text

`` [object Object] [object Object], [object Object] [object Object] [object Object] [object Object], [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object], [object Object] [object Object] [object Object] [object Object] [object Object]-[object Object] [object Object]. [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]. [object Object] [object Object] [object Object], [object Object] [object Object], [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object].[object Object] [object Object], [object Object] [object Object] [object Object] [object

When I use the anchot tag, it works but I want to use the Link component. What could I be doing wrong in my code?

CodePudding user response：

You don't use forEach in react, since that's an imperative approach that doesn't work in JSX. Use map to create an array of JSX values, and return it as JSX code.

const elems = [
  {
    "type": "non-word",
    "value": ""
  },
  {
    "type": "word",
    "value": "One"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "Saturday"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "when"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "I"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "was"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "young"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "my"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "father"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "and"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "I"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "left"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "house"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "early"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "in"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "morning"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "when"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "it"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "was"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "still"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "blue"
  },
  {
    "type": "non-word",
    "value": "-"
  },
  {
    "type": "word",
    "value": "black"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "outside"
  },
  {
    "type": "non-word",
    "value": ". "
  },
  {
    "type": "word",
    "value": "The"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "grass"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "left"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "wet"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "marks"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "on"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "our"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "shoes"
  },
  {
    "type": "non-word",
    "value": ". "
  },
  {
    "type": "word",
    "value": "In"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "the"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "backyard"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "under"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "stones"
  },
  {
    "type": "non-word",
    "value": ", "
  },
  {
    "type": "word",
    "value": "we"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "dug"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "up"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "crawly"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "worms"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "and"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "laid"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "them"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "in"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "a"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "can"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "with"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "lumps"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "of"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "damp"
  },
  {
    "type": "non-word",
    "value": " "
  },
  {
    "type": "word",
    "value": "dirt"
  }
]

const Words = () => {
return (<p>{elems.map(el => el.type === "word" ? (<a href={"/" el.value}>{el.value}</a>) : el.value)}</p>)
}

ReactDOM.render(<Words />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>