jsmanifest

return (
  <div>
    <AppContent
      onChange={(cb) => {
        setCollapsed(false)
        onChange(cb)
      }}
    />
  </div>
)

jsmanifest

function handleOnChange(e) {
  if (onChange) {
    onChange(function({ person, collapsed }) {
      console.log(`collapsed: ${collapsed}`)
      console.log(`person: ${JSON.stringify(person)}`)
      setValue(e.target.value)
    })
  }
}

jsmanifest

function AppContent({ onChange }) {
  const [value, setValue] = React.useState('')
  
  function handleOnChange(e) {
    if (onChange) {
      onChange(function({ person, collapsed }) {
        console.log(collapsed)
        console.log(person)
        setValue(e.target.value)
      })

jsmanifest

function ListComponent({
  label,
  items = [],
  collapsed,
  toggle,
  limit,
  total,
  renderListItem,
  renderCollapser,
  renderExpander,

jsmanifest

function ListComponent({
  label,
  items = [],
  collapsed,
  toggle,
  limit,
  total,
  renderListItem,
}) {
  return (

jsmanifest

function List({
  component: RootComponent = ListRoot,
  collapsed,
  toggle,
  header,
  label,
  items = [],
  limit = 3,
  renderHeader,
  renderList,

jsmanifest

function ListComponent({ label, items = [], collapsed, toggle, limit, total }) {
  return (
    <ul>
      <p>{label}</p>
      {items.map((member) => (
        <ListItem key={member}>{member}</ListItem>
      ))}
      {total > limit && (
        <ListItem className="expand">
          <button type="button" onClick={toggle}>

jsmanifest

function App() {
  const [collapsed, setCollapsed] = React.useState(true)
  
  function toggle() {
    setCollapsed((prevValue) => !prevValue)
  }
  
  const pediatricians = [
    'Michael Lopez',
    'Sally Tran',

jsmanifest

function List({
  component: RootComponent = ListRoot,
  collapsed,
  toggle,
  header,
  label,
  items = [],
  limit = 3,
  renderHeader,
  renderList,

jsmanifest

function List({
  collapsed,
  toggle,
  header,
  label,
  items = [],
  limit = 3,
  renderHeader,
  renderList,
}) {