user image

edgar steb
Published in : 2022-05-06

Warning: React.jsx: type is invalid

React js

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Calculator`., 
   in Calculator (created by App)
   in RCTView (created by View)
   in View (created by App)
   in App (created by ExpoRoot)
   in ExpoRoot
   in RCTView (created by View)
   in View (created by AppContainer)
   in DevAppContainer (created by AppContainer)
   in RCTView (created by View)
   in View (created by AppContainer)
   in AppContainer
   in main(RootComponent)

import React, { Component } from 'react';
import { View, StyleSheet, Text, StatusBar } from 'react-native';
import Button from './Button';
import Screen from './Screen';
import History from './History';

export class Calculator  {
  constructor(props) {
    super(props);
    this.state = {
      expression: '',
      result: '',
      actualExpression: '',
      isHistoryVisible: false,
      isEqualPress: false,
      historyarr: [],
    };
    this.historyarrRef = React.createRef();
  }

  showHistory = () => {
    this.setState({ isHistoryVisible: true });
  };

  closeHistory = () => {
    this.setState({ isHistoryVisible: false });
  };

  getButtonPressedVal = (buttonPressed) => {
    const { expression, actualExpression, isEqualPress, result } = this.state;
    let newExpression;
    let newActalExp ;
    if (isEqualPress) {
      newExpression = `${buttonPressed}`;

    } else newExpression = `${expression}${buttonPressed}`;

    //console.log(newExpression);

    this.setState({
      expression: newExpression,
    });

    let actualChar = buttonPressed;
    if (actualChar === '÷') {
      actualChar = '/';
    } else if (actualChar === '×') {
      actualChar = '*';
    } else if (actualChar === '−') {
      actualChar = '-';
    }

    if(isEqualPress){newActalExp=`${actualChar}`}
    else{
    newActalExp = `${actualExpression}${actualChar}`;
    }
    
    this.setState({
      actualExpression: newActalExp,
      isEqualPress:false
    });

    try {
      this.setState({
        result: eval(newActalExp).toString(),
      });
    } catch (e) {
      console.log('error');
    }
  };

  allClear = () => {
    this.setState({
      expression: '',
      result: '',
      actualExpression: '',
    });
  };

  del = () => {
    const { expression, actualExpression, result, prevRes } = this.state;
    let newActalExp = actualExpression.substring(
      0,
      actualExpression.length - 1
    );
    this.setState({
      expression: expression.substring(0, expression.length - 1),
      actualExpression: newActalExp,
    });
    try {
      this.setState({
        result: eval(newActalExp).toString(),
      });
    } catch (e) {
      try {
        this.setState({
          result: eval(
            newActalExp.substring(0, expression.length - 2)
          ).toString(),
        });
      } catch (e) {
        this.setState({ expression: '', result: '', actualExpression: '' });
      }
    }
  };

  onEqualPress = () => {
    const { expression, result, historyarr, isEqualPress } = this.state;
    const hist = { expression, result };
    if (expression != '') {
      historyarr.push(hist);
    }
    this.setState({
      historyarr: historyarr,
      expression: result,
      result: '',
      isEqualPress: true,
    });
    console.log(historyarr);
  };

  clearHist = () => {
    this.setState({
      historyarr: [],
    });
  };

  render() {
    const {
      expression,
      result,
      actualExpression,
      isHistoryVisible,
    } = this.state;

    return (
      <>
        {isHistoryVisible && (
          <View style={styles.historyWrap}>
            <History
              closeHistory={this.closeHistory}
              historyarr={this.state.historyarr}
              clearHist={this.clearHist}
            />
          </View>
        )}
        <View style={styles.container}>
          <StatusBar barStyle="light-content" backgroundColor="darkred" />

          <Screen
            style={styles.screen}
            expression={expression}
            result={result}
          />
          <Button
            style={styles.button}
            getButtonPressedVal={this.getButtonPressedVal}
            allClear={this.allClear}
            del={this.del}
            showHistory={this.showHistory}
            onEqualPress={this.onEqualPress}
          />
        </View>
      </>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 3,
  },
  historyWrap: {
    position: 'absolute',
    top: 5,
    zIndex: 3,
    height: '100%',
    width: '100%',
    backgroundColor: '#00000061',
  },
});

export default Calculator;	

Comments

Mohamed Atef Date : 2022-05-06

Best answers

46

Best answers

46

I believe that's because you forget to add the extended class of React you need to update the declaration of the class to 

class Calculator extends React.Component {
	//Your code
}
export default Calculator;

Please try and let me know if it works with you 
Good Luck

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

How to use Datepick of Mui with Formik
Publish date: 2022-02-14 | Comments: 6

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

Best way to update the state in one class component from the redux store?
Publish date: 2022-03-30 | Comments: 3

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js