Simple Dynamic List via mapping

SimpleUlList.jsx

/** @jsx jsx */
import { jsx } from 'theme-ui'
import React from 'react'

const list = ['a', 'b', 'c']

const SimpleUlList = () => (
	<ul>
		{list.map((item) => (
			<li key={item}>{item}</li>
		))}
	</ul>
)

export default SimpleUlList


//If we would use the List as child component in another component, we could pass the list as props to it:

const mylist = ['a', 'b', 'c'];

const App = () => (
  <SimpleList list={mylist} />
)

const SimpleList = ({ list }) => (
  <ul>
    {list.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)