how to change syntax Typescript to javascript React native

Question

i'm building Raect Native with Expo, trying to make custom dropdown and i find and article wit an awesome expiation how to do that here

the code written with typeScript syntax, but my project using a javaScript syntax so

how can i change the code syntax's to work on my project?
can use both Typescript and javascript on one project (so build the reusable component with Typescript)?

interface Props {
  label: string;
}

const Dropdown: FC<Props> = ({ label }) => {
  const [visible, setVisible] = useState(false);

  const toggleDropdown = () => {
    setVisible(!visible);
  };

  const renderDropdown = () => {
    if (visible) {
      return (
          <Text style={styles.dropdown}>
            This is where the dropdown will be rendered.
          </Text>
      );
    }
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={toggleDropdown}
    >
      {renderDropdown()}
      <Text style={styles.buttonText}>{label}</Text>
      <Icon type='font-awesome' name='chevron-down'/>
    </TouchableOpacity>
  );
}

JeanJacquesGourdin · Accepted Answer · 2022-06-22 07:31:30Z

A js script is a valid ts script so you can 'use both'.

(In fact every thing is typescript (sometimes without types))

To make this full javascript you have to suppress types and interfaces, like this :

// interface Props {
//   label: string;
// }

// const Dropdown: FC<Props> = ({ label }) => {
const Dropdown = ({ label }) => {
  const [visible, setVisible] = useState(false);

  const toggleDropdown = () => {
    setVisible(!visible);
  };

  const renderDropdown = () => {
    if (visible) {
      return (
          <Text style={styles.dropdown}>
            This is where the dropdown will be rendered.
          </Text>
      );
    }
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={toggleDropdown}
    >
      {renderDropdown()}
      <Text style={styles.buttonText}>{label}</Text>
      <Icon type='font-awesome' name='chevron-down'/>
    </TouchableOpacity>
  );
}

Collectives™ on Stack Overflow

how to change syntax Typescript to javascript React native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related