Converting React TypeScript to React js

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.

Jan Swart · Accepted Answer · 2020-05-14 11:15:41Z

2

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.

edited May 14, 2020 at 11:15

answered May 14, 2020 at 8:52

Jan Swart

7,34110 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NeroSenor Over a year ago

Hello @jan-swart, I've been trying to debug the issue in the post below. Might you have any guidance for me? Gracias!

NeroSenor · Accepted Answer · 2020-05-14 14:39:23Z

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;

Collectives™ on Stack Overflow

Converting React TypeScript to React js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related