index.tsx

import { createElement, SFC, useState } from 'react'
import Inspector from '../Inspector'

type Props = {
  value: any
  small?: boolean
}

const ValueInspector: SFC<Props> = ({ value, small }) => {
  const [expandedPaths, setExpandedPaths] = useState([])

  function onToggleExpand(path: string[]) {
    const pathString = path.join('.')

    if (expandedPaths.includes(pathString)) {
      setExpandedPaths(
        expandedPaths.filter((currentPath) => currentPath !== pathString)
      )
    } else {
      setExpandedPaths(expandedPaths.concat(pathString))
    }
  }

  return (
    <Inspector
      value={value}
      expandedPaths={expandedPaths}
      onToggleExpand={onToggleExpand}
      small={small}
    />
  )
}

export default ValueInspector