Render the children.

src/OrgAst.tsx

@@ -3,7 +3,6 @@ import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import styles from "./OrgAst.module.css";
 
 const OrgAst = (props: { addHighlight: Function; value: string }) => {
-  console.log(styles);
   const ast_tree = parse_org(props.value);
   console.log(JSON.stringify(ast_tree));
 
@@ -19,12 +18,10 @@ const OrgAst = (props: { addHighlight: Function; value: string }) => {
 };
 
 const OrgAstNode = (props: { node: any }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
-
   return (
     <div className={styles.OrgAstNode}>
       <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
-      <details open={isOpen} >
+      <details>
         <summary>Standard Properties</summary>
         <dl>
           <dt>begin</dt>
@@ -40,12 +37,21 @@ const OrgAstNode = (props: { node: any }) => {
         </dl>
       </details>
       {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
-        <details open={isOpen} >
+        <details open={true}>
           <summary>Children</summary>
+          <div className={styles.OrgAstChildren}>
+            <OrgAstNodeList node_list={props.node.children} />
+          </div>
         </details>
       ) : null}
     </div>
   );
 };
 
+const OrgAstNodeList = (props: { node_list: any[] }): React.JSX.Element[] => {
+  return props.node_list.map((node) => {
+    return <OrgAstNode node={node} />;
+  });
+};
+
 export default OrgAst;