edgar steb
Published in : 2022-05-06
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;
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
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
Please try and let me know if it works with you
Good Luck