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

51

Best answers

51

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

How to implement SSO with React and ASP.NET Core Web API ?
Publish date: 2022-11-03 | Comments: 0

Tag: React js

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

Tag: React js

React Redux : Connect is not called
Publish date: 2022-03-02 | Comments: 1

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js

npm install @mui/material returns error
Publish date: 2022-04-02 | Comments: 1

Tag: React js

Reload browser window using Reactjs?
Publish date: 2022-02-08 | Comments: 4

Tag: React js