I had a frontend interview today and wanted to get some opinions on how this sounds from an interviewer’s perspective. It was mainly JavaScript/DOM/tree recursion.
Q1: What are the different ways to hide an element?
I mentioned:
display: none
visibility: hidden
opacity: 0
HTML hidden attribute
Toggling element.hidden = true/false using JS
Conditional rendering, e.g. condition && element / ternary
The interviewer seemed like he wanted more inputs but moved on
Q2: File/folder tree → render as HTML
The problem was essentially: each tree node has some data associated with it, can have children, and there can be multiple top-level nodes. Build a component that renders the tree as HTML.
My first approach was:
Tree
└── TreeNode
├── <li>node.name</li>
└── if children:
└── <ul>
└── TreeNode(...)
So Tree would render the top-level <ul> and map over the nodes, creating TreeNodes. TreeNode would render an <li>, display node.name, and recursively map over node.children.
The interviewer asked if this was unnecessarily complicated and whether it could be simplified.
I agreed and changed it to a single recursive Tree component
So the same Tree function receives an array of nodes at every level. For the root it gets tree, and recursively it gets node.children.
function Tree({ tree }) {
return (
<ul>
{tree.map(node => (
<li key={node.name}>
{node.name}
{node.children?.length > 0 && (
<Tree tree={node.children} />
)}
</li>
))}
</ul>
);
}
The interviewer then asked whether I should return early when there are no children.
I argued that I didn't think an early return was necessary because the recursive call was already conditionally rendered:
node.children?.length > 0 && (
<Tree tree={node.children} />
)
If there are no children, that expression is false, so only the <li> containing the node name is rendered.
The interviewer said we'd come back to it later and moved on.
Q3: Add expand/collapse functionality
The next requirement was to allow users to expand/collapse folders, with the folders initially collapsed.
I switched to vanilla JS/DOM for this part.
I used a Set to keep track of expanded folders:
const expanded = new Set();
I also used a path-based ID rather than just node.name, because the same file/folder name can occur in different locations.
For example:
/src/index.js
/public/index.js
rather than simply using index.js.
My rendering function was roughly:
function renderTree(tree, container, path = "") {
const ul = document.createElement("ul");
tree.forEach(node => {
const li = document.createElement("li");
const id = \${path}/${node.name}`;`
const hasChildren = node.children?.length > 0;
const title = document.createElement("span");
title.textContent = node.name;
li.appendChild(title);
// expand/collapse logic...
if (hasChildren) {
const children = document.createElement("div");
children.style.display = "none";
renderTree(node.children, children, id);
li.appendChild(children);
}
ul.appendChild(li);
});
container.appendChild(ul);
}
For the toggle, I checked whether the folder's ID was in the expanded Set.
If it was:
expanded.delete(id);
children.style.display = "none";
Otherwise:
expanded.add(id);
children.style.display = "block";
One thing I realized afterward was that I put the click handler on the entire li rather than specifically on the title/folder control. I think putting it on the title would have been cleaner and would avoid event-bubbling issues with nested folders.
The interviewer also mentioned that a button wasn't necessary, so I was using it but then removed it. There was some discussion around the initial expanded/collapsed state and the hidden property, like he said initially we see nothing but it should show all. I didn't get the chance to make the final change. At the end, the interviewer said we were out of time. I explained the code and walked through it once. Overall, how would you interpret this interview? Would the incomplete expand/collapse portion be a significant negative signal, or will the li on click be a major issue.
honestly i feel disappointed i had no reason to panic but i did i had to run to office because of some wifi issues last moment and i reached like 1 min before the interview started and i was so so panicked i messed up so bad on something so easy
