Return and Render JSX

Question

I have the following function which adds JSX to the variable markup. But, when the function is called, the markup is rendered as plain text rather than JSX. How do I get the string to render as JSX instead of plain text?

Function Call:

<FormGroup controlId="items">
    {this.renderItems()}
</FormGroup>

renderItems():

renderItems() {
    let content = this.state.content;
    console.log(content);
    let markup = "<ul>";
    for (const [key, value] of Object.entries(content)) {
        if (value) {
            markup += "<li><Checkbox checked>" + key + "</Checkbox></li>"
        }
        else {
            markup += "<li><Checkbox>" + key + "</Checkbox></li>"
        }
    }
    markup += "</ul>";

    return (markup);
}

Instead of strings, you can map to an array of React elements (or at least push to an array of them) — Andrew Li, Oct 15 '18 at 03:20
Why not have `renderItems` returning returning JSX rather than strings? — Alexander Nied, Oct 15 '18 at 03:21

score 4 · Accepted Answer · answered Oct 15 '18 at 03:46

The problem is you're not creating JSX elements. You're just creating strings. One way of accomplishing this would be

renderItems() {
  let content = this.state.content;
  return (
    <ul>
      {Object.entries(content).map(([key, value]) => (
        <li>
          <Checkbox checked={!!value}>{key}</Checkbox>
        </li>
      ))}
    </ul>
  );
}

Here, we use JSX Expressions to add dynamic values.

sMojtaba Mar · Answer 2 · 2018-10-15T04:03:58.087

your markup is string not JSX

Try this

 renderItems() {
    let content = this.state.content;
    let markup=[]
    console.log(content);
    markup.push(<ul>);
    for (const [key, value] of Object.entries(content)) {
        if (value) {
            markup.push(<li><Checkbox checked={true}>{ key }</Checkbox></li>)
        }
        else {
            markup.push(<li><Checkbox checked={false}>{key}</Checkbox></li>)
        }
    }
    markup.push(</ul>);

    return (markup);
}

Hemadri Dasari · Answer 3 · 2018-10-15T06:49:29.637

Try this. The issue is you are appending ul and li as a strings so they will be treated as string but not jsx.

Since content is array of objects you can utilise.map for iteration and you will get new array of li elements. return the array by enclosing ul element.

Also you should never forget to add a key when returning jsx elements in loop. The key should be unique, the recommended way is to add a key from data if you have otherwise use index as key

 renderItems() {
     const { content } = this.state;
    const items = content.map((item, index) => (
            <li key={index}><Checkbox checked={item.value ? true : false }>{item.value}</Checkbox></li>
     )
    return <ul>{items}</ul>
 }

In the question it is `{ key }`, but you used `{item}` Is it ture ? — sMojtaba Mar, Oct 15 '18 at 04:50

Return and Render JSX

3 Answers3

Linked