Why does this component created with function not work?

Asked

Viewed 40 times

0

Component creating with function, returns error

import { React } from "react";
import { Text } from "react-native";

const Product = () => <Text>Product</Text>;

export default Product;

inserir a descrição da imagem aqui

But when it’s created with class it works normally

import React, { Component } from 'react';
import { Text } from "react-native";

export default class Product extends Component{
    render(){
        return(
            <Text>Deu certo</Text>
        );
    }
}

react react-native

2 answers

1


In the example of function vc is importing React with destructing and not as default

change of:

import { React } from "react";

for:

import React from "react";

  • Excellent observation.

0

When you export an object, example:

export {
  func1,
  func2
}

When importing you should use the destructuring, new ES6 Feature which aims to extract properties from an object or even values from an array.

Use for the example above: import { func1, func2 } from './pathArquivo';

When you export by default you don’t need to use destructuring.

In the React example the correct use is:

import React from 'react'

Browser other questions tagged react react-native

You are not signed in. Login or sign up in order to post.