CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-camera
Lmao12233
Lmao12233

Reputation: 61

Nothing was returned from render. This usally means a return statement is missing

I use React Native Camera to be able to scan barcodes and right now I'm trying to show a Modal when barcode checks with the item in database.

The error I'm getting is:

Error: checkBarcode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

What should I do to get this working. What am I doing wrong?

Code:

CheckBarcode(scanResult) {
  const product = DataBase.find((codeMetadata) => {
    return codeMetadata.id === scanResult.data;
  });

  if (this.barCodeRead) {
    if (product) {
      this.barCodeRead = false;
      this.setModalVisible(true);
      return (
        <View>
          <Text>{product.company}</Text>
          <Text>{product.name}</Text>
          <Text>{product.gluten}</Text>
          <Text>{product.ingredients}</Text>
          <Text>{product.id}</Text>
        </View>
      );
    } else {
      this.barCodeRead = true;
      return (
        <View>
          <Text>Produkten finns inte</Text>
        </View>
      );
    }
  }
}

Modal:

<Modal
  animationType="fade"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => {
    this.setModalVisible(!modalVisible);
  }}
>
  <View
    style={{
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "rgba(0,0,0,0.8)",
    }}
  >
    <View
      style={{
        backgroundColor: "#fff",
        padding: 35,
        borderRadius: 10,
        width: "80%",
        height: "80%",
      }}
    >
      <View
        style={{
          borderTopWidth: 1,
          borderTopColor: "#000",
          marginBottom: 10,
        }}
      >
        <this.CheckBarcode />
      </View>
      <View>
        <TouchableOpacity
          style={{}}
          onPress={() => {
            this.setModalVisible(!modalVisible);
            this.barCodeRead = true;
          }}
        >
          <Text style={{ alignSelf: "center", color: "#FF0000" }}>Skanna</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</Modal>

Upvotes: 2

Views: 308

Answers (3)

Lmao12233
Lmao12233

Reputation: 61

I Fixed it by myself. By just taking a pause from the project, I realized how easy it was to fix the problem.

this.state = {
      modalVisible: false,
      company: [],
      name: [],
      gluten: [],
      ingredients: [],
      id: [],
}

checkBarcode(scanResult) {
    const product = DataBase.find((codeMetadata) => {
      return codeMetadata.id === scanResult.data;
    });

    if (this.barCodeRead) {
      if (product) {
        this.barCodeRead = false;
        this.setState({
          modalVisible: true,
          company: [product.company],
          name: [product.name],
          gluten: [product.gluten],
          ingredients: [product.ingredients],
          id: [product.id],
        });
      } else {
        
      }
    }
  }

Upvotes: 2

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

Have a try with the below code changes as you have to return JSX or null if the barCodeRead has nullish value

CheckBarcode(scanResult) {
    const product = DataBase.find((codeMetadata) => {
      return codeMetadata.id === scanResult.data;
    });

    if (this.barCodeRead) {
      if (product) {
        this.barCodeRead = false;
        this.setModalVisible(true);
        return (
          <View>
            <Text>{product.company}</Text>
            <Text>{product.name}</Text>
            <Text>{product.gluten}</Text>
            <Text>{product.ingredients}</Text>
            <Text>{product.id}</Text>
          </View>
        );
      } else {
        this.barCodeRead = true;
        return (
          <View>
            <Text>Produkten finns inte</Text>
          </View>
        );
      }
    } else {
      return (
        <View>
          <Text>No product</Text>
        </View>
      );
    }
  }

Upvotes: 1

Ajeet Shah
Ajeet Shah

Reputation: 19823

You need to return some JSX from render function in your components. If you want to show nothing at the UI, you can return null. An example:

if (this.barCodeRead) {
  if (product) {
    return (
      <View>
        <Text>{product.company}</Text>
      </View>
    );
  } else {
    return (
      <View>
        <Text>Produkten finns inte</Text>
      </View>
    );
  }
 }
 return <div>No Data to show</div> // or null

Upvotes: 2

Related Questions