CODEWITHSUNDEEP
javascriptreactjsreact-native
bsnow
bsnow

Reputation: 11

React Native Render method syntax error wants a semicolon

I am trying to use a simple function component to render a popup. I was following react-native-modul github page. https://github.com/react-native-community/react-native-modal

For some reason I keep getting an error next to render() saying I need a ; when in all my other code it is set up the same way. Is something else causing this?enter image description here

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

function Popup() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <Button title="Show modal" onPress={toggleModal} />

        <Modal isVisible={isModalVisible}>
          <View style={{flex: 1}}>
            <Text>Hello!</Text>

            <Button title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    );
  }
}

export default Popup;

Upvotes: 0

Views: 119

Answers (1)

Steven Bell
Steven Bell

Reputation: 1989

You can only use render in a class component.

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

function Popup() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

    return (
      <View style={{flex: 1}}>
        <Button title="Show modal" onPress={toggleModal} />

        <Modal isVisible={isModalVisible}>
          <View style={{flex: 1}}>
            <Text>Hello!</Text>

            <Button title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    );
  }

export default Popup;

Upvotes: 1

Related Questions