As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen.
Here is how it looks:
Without the text field: https://i.stack.imgur.com/tZDSV.png With the text field: https://i.stack.imgur.com/aQ8oA.png
Here is a snippet of my code:
App.js:
import React, { Component} from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Text1 from './Text1';
import Helmet from 'react-helmet';
import HRLOGO from './images/logo.png';
import ABCLOGO from './images/Group 20399.png';
export default class App extends Component
{
state = {};
render()
{
return (
<div className="hr">
<div>
<img src={HRLOGO} alt="" className="container-div"/>
</div>
<div>
<img src={ABCLOGO} alt="" className="container-div2"/>
</div>
<Helmet>
<style>{'body { background-color: #2d4250; }'}</style>
</Helmet>
<div>
<h1 className="InvoiceStyle">Invoice List</h1>
</div>
<div className="Rectangle">
</div>
<div className="search">
<Text1></Text1>
</div>
<footer className="Privacy">
<p>
<a href="https://www.highradius.com/privacy-policy/">Privacy Policy </a>
| ©Highradius Corporation. All rights reserved.
</p>
</footer >
</div>
);
}
}
The css File App.css:
.App {
text-align: center;
}
// Remaining CSS styles go here...
Text1.js:
import TextField from "@mui/material/TextField";
const Text1 = () => {
return (
<form noValidate autoComplete = "off">
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</form>
);
}
export default Text1;
I'm experiencing a blank page issue with my React app. How can I resolve this?
Edit: Browser Console Errors: Links to browser console error screenshots...