React: How To Append JSX

Posted on Edited on In

Use array!

1
2
3
4
const collect = []
items.map(item => {
    collect.push(<li>{item}</li>)
})

React example

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    const items = [1,2,3]
    const collect = [<li>first row</li>];
    items.map(item => collect.push(<li>{item}</li>))
    return <div>{collect}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Will print out this：

  • first row
  • 1
  • 2
  • 3