Converting React TypeScript to React js - reactjs

Question

I am new to coding and I was wondering if someone can show me how to convert this code that was shared on Sandbox from 'React TypeScript ' to 'React js'.
import * as React from "react";
import { render } from "react-dom";
import {TreeView, TreeItem, TreeItemProps, TreeViewProps} from "#material-ui/lab"
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
function TreeItemX(props:TreeItemProps &{iconClickOnly:boolean}){
// todo should call the original
const handler:TreeItemProps['onLabelClick'] = evt => evt.preventDefault();
const {iconClickOnly,...others} = props;
const handledProps:TreeItemProps ={
...others,
[props.iconClickOnly?'onLabelClick':'onIconClick']:handler
}
return <TreeItem {...handledProps} />
}
function TreeViewX(props:TreeViewProps&{defaultPreventedPrevents:boolean}){
const {defaultPreventedPrevents,...others} = props;
const originalOnNodeSelect = props.onNodeSelect;
const preventingOnNodeSelect = (evt:React.ChangeEvent<{}>, nodeId:string&string[]) => {
if(defaultPreventedPrevents){
if(!evt.defaultPrevented){
originalOnNodeSelect?.(evt,nodeId)
}
}else{
if(evt.defaultPrevented){
originalOnNodeSelect?.(evt,nodeId)
}
}
}
return <TreeView {...others} onNodeSelect={preventingOnNodeSelect}/>
}
function App(){
const [selected,setSelected] = React.useState<string>('')
return (
<TreeViewX
defaultPreventedPrevents={true}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
selected={selected}
onNodeSelect={(_,id)=>{
setSelected(id);
}}>
<TreeItemX iconClickOnly nodeId='parent' label='Parent'>
<TreeItemX iconClickOnly nodeId='child' label='Child'/>
</TreeItemX>
</TreeViewX>
);
}
render(<App />, document.getElementById("root"));
Thank you in advance.

Answer 1

A good start would be to remove the types, for example:
function TreeItemX(props){
const handler = evt => evt.preventDefault();
const { iconClickOnly, ...others } = props;
const handledProps ={
...others,
[props.iconClickOnly ? 'onLabelClick' : 'onIconClick']
}
return <TreeItem {...handledProps} />
}
Just continue doing this, until you have your React code without the types in it.

Answer 2

Thank you so much for your assistance. I get the following error when I attempt to compile:
./src/App.js Line 17:3: Parsing error: Unexpected token
15 | ...others, 16 | [props.iconClickOnly ? 'onLabelClick'
: 'onIconClick']
17 | }
| ^ 18 | return 19 | } 20 |
Below is the code so far:
import React from "react";
import TreeView from "#material-ui/lab/TreeView";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
import TreeItem from "#material-ui/lab/TreeItem";
import "./App.css";
function TreeItemX(props){
const handler = evt => evt.preventDefault();
const { iconClickOnly, ...others } = props;
const handledProps ={
...others,
[props.iconClickOnly ? 'onLabelClick' : 'onIconClick']
}
return <TreeItem {...handledProps} />
}
function TreeViewX(props){
const {defaultPreventedPrevents,...others} = props;
const originalOnNodeSelect = props.onNodeSelect;
const preventingOnNodeSelect = (evt, nodeId) => {
if(defaultPreventedPrevents){
if(!evt.defaultPrevented){
originalOnNodeSelect?.(evt,nodeId)
}
}else{
if(evt.defaultPrevented){
originalOnNodeSelect?.(evt,nodeId)
}
}
}
return <TreeView {...others} onNodeSelect={preventingOnNodeSelect}/>
}
function App() {
return (
<div className="App">
<TreeViewX
defaultPreventedPrevents={true}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
selected={selected}
onNodeSelect={(_,id)=>{
setSelected(id);
}}>
<TreeItemX iconClickOnly nodeId='parent' label='Parent'>
<TreeItemX iconClickOnly nodeId='child' label='Child'/>
</TreeItemX>
</TreeViewX>
);
</div>
);
}
export default App;