When I render just one component (App or Send) everything is ok, but when I use react router dom it returns this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
import React from "react";
import { render} from "react-dom";
import App from './components/app';
import Send from './components/sendMoney';
import {
BrowserRouter,
Route,
Switch
} from 'react-router-dom';
render(<BrowserRouter>
<Switch>
<Route path="/transact" component={Send}/>
<Route path="/" component={App}/>
</Switch>
</BrowserRouter>,document.getElementById('root'));
Edit: Error is in line 12, render(....
App component:
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Axios } from 'axios';
import axios from 'axios';
import Blocks from './blocks';
class App extends Component {
state = {
walletInfo:{
address:"",
balance:"",
}
}
async componentDidMount(){
const response=await axios.get('http://localhost:3000/api/wallet-info');
//console.log(response);
this.setState({walletInfo:response.data});
}
render() {
return (
<>
<div className='container-fluid'>
<div className='shadow m-3 bg-info p-3 rounded-3'>
<h1 className='text-secondry'>Your wallet info:</h1>
<div className='row'>
<div className='col-12'>
<h3>address:</h3> <div className='text-light '><h5>{this.state.walletInfo.address}</h5></div>
</div>
<div className='col-12'>
<h3>balance:</h3> <div className='text-light'><h5>{this.state.walletInfo.balance}</h5></div>
</div>
</div>
</div>
</div>
<Blocks/>
</>
);
}
}
export default App;