import React, { useState } from 'react'; import '../style.css'; export default function FolderNew({ treeset, addItem, rename, delete_item }) { const [expand, setExpand] = useState(false); const operationType = React.useRef('new'); const [minput, setInput] = useState({ value: '', show: false, placeholder: '', }); if (treeset.isfolder) { return (

setExpand(!expand)}> 📁{treeset.name} {minput.show && ( { if (el.keyCode === 13 && el.target.value) { if (operationType.current === 'new') { minput.placeholder.toString().includes('folder') ? addItem(treeset.id, minput.value, true) : addItem(treeset.id, minput.value, false); } else if (operationType.current === 'update') { rename(treeset.id, minput.value); } setInput({ show: false, value: '', placeholder: '', }); } }} autoFocus value={minput.value} onChange={(e) => setInput({ ...minput, value: e.target.value })} /> )}

{expand && treeset.children.map((e) => { return ( ); })}

); } else { return (

📄{treeset.name}

{minput.show && ( { if (el.keyCode === 13 && el.target.value) { if (operationType.current === 'new') { minput.placeholder.toString().includes('folder') ? addItem(treeset.id, minput.value, true) : addItem(treeset.id, minput.value, false); } else if (operationType.current === 'update') { rename(treeset.id, minput.value); } setInput({ show: false, value: '', placeholder: '', }); } }} autoFocus value={minput.value} onChange={(e) => setInput({ ...minput, value: e.target.value })} /> )}

); } }

How to build a File Explorer? Atlassian Frontend Machine Coding Round Question | JavaScript Interview Question | React.js

@sameer kadam