Semantic UI desplay component behind another component - javascript

The following code is written using the semantic UI class to display the header component.
This is the Header.js file.
import React from "react";
const Header = () => {
return (
<div className="ui fixed menu">
<div className="ui container center">
<h2>Contact Manager</h2>
</div>
</div>
);
};
export default Header;
This is the AddContact.js file
import React from "react";
class AddContact extends React.Component{
render(){
return(
<div className="ui main">
<h2>Add Contact</h2>
<form className="ui form">
<div className="field">
<label>Name :</label>
<input type="text" name="name" placeholder="name" />
</div>
<div className="field">
<label>Contact Number :</label>
<input type="text" name="contactnumber" placeholder="Contact Number" />
</div>
</form>
</div>
);
}
}
export default AddContact;
This is the App.js file.
import React from 'react';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
function App() {
return (
<div>
<Header />
<AddContact />
</div>
);
}
export default App;
This is the index.js file.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
When I run the project, the form component from the AddContact.js is displayed behind the Header component from the Header.js file. How can I solve this problem?

Related

disappearance of a component after reloading the page

Everything works fine. Content changes after pressing NavLink, but when I reload the page, the content disappears. Аlthough, interestingly, the URL remains the same. How to fix, or so it should be?
*Before reloading *
*After reloading *
Code:
App.js:
import React from 'react'
import './App.css';
import Header from './components/Header/Header';
import Nav from './components/Nav/Nav';
import Profile from './components/Profile/Profile.jsx';
import Dialog from './components/Dialog/Dialog'
import { BrowserRouter, Route } from 'react-router-dom';
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Header />
<Nav />
<Route path='/profile' component={Profile} />
<Route path='/dialog' component={Dialog} />
</div>
</BrowserRouter>
);
}
export default App;
Dialog.jsx:
import React from 'react'
import style from './Dialog.module.css'
import MessageOleg from '../Messages/MessageOleg'
import MessageMax from '../Messages/MessageMax'
import { BrowserRouter, Route, NavLink } from 'react-router-dom'
const Dialog = () => {
return (
<BrowserRouter>
<div className={style.dialog}>
<div className={style.users}>
<div className={style.user}> <NavLink to='/messageOleg'> Oleg </NavLink> </div><br />
<div className={style.user}> <NavLink to='/messageMax' >Max </NavLink> </div><br />
<div className={style.user}> Nata </div><br />
<div className={style.user}> Fuflo </div><br />
<div className={style.user}> Kiko </div><br />
</div>
<hr />
<Route path='/messageOleg' component={MessageOleg} />
<Route path='/messageMax' component={MessageMax} />
</div>
</BrowserRouter>
)
}
export default Dialog;
MessageOleg.jsx:
import React from 'react'
import style from './MessageOleg.module.css'
const MessageOleg = () => {
return (
<div className={style.messages}>
<div className={style.message}>
Hey
</div>
</div>
)
}
export default MessageOleg;

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest
It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

React components doesn't display content

I am creating a web application using Laravel and React JS. I have written multiple JSX components to load the page. All the components are mounting properly without any errors, but here the problem is Some heading tags and some form content are not displaying on the page and also most of the text and other content missing from the page. Even those are rendering on component and I can inspect those using browser console and react dev tools. But it is not displaying on the page. I tried so many ways to fix this problem, but finally, I ended up with failure. Any help regarding fix this issue would be appreciable.
Here's my code:
HomeBanner.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class HomeBanner extends Component {
render() {
return (
<div className="banner layer" id="home">
<div className="container">
<div className="row banner-text">
<div className="col-lg-12 col-md-12 mt-lg-0 mt-5 banner-form" data-aos="fade-left">
<h5>Exclusively We are Expert in Medical Professional</h5>
<form action="#" className="mt-4 banner-form-input">
<p>What are you Looking?
<label className="container-radio first-radio">Consultant
<input type="radio" name="radio" />
<span className="checkmark"></span>
</label>
<label className="container-radio">Diagonastic Center
<input type="radio" name="radio" />
<span className="checkmark"></span>
</label>
</p>
<div className="row">
<div className="col-lg-4">
<div className="location-wrapper">
<div className="demo">
<input type="text" className="location-input" placeholder="Location" /><input type="submit" value="" className="sub-loc" /><i className="fa fa-crosshairs"></i>
</div>
</div>
</div>
<div className="col-lg-8">
<div className="search-wrapper">
<div className="demo1">
<input type="text" className="location-input" placeholder="Search by specialist / Name / Clinic" /><input type="submit" value="" className="sub-ser" /><i className="fa fa-search"></i>
</div>
</div>
</div>
</div>
</form>
<div className=" py-md-3 circle-icons">
<div className="row">
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-1.png" />
<span>Schedule A <br /> Medical Checkup</span>
</div>
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-2.png" />
<span>Appointment with <br /> Best Doctor Near You</span>
</div>
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-3.png" />
<span>Get Your Reports <br /> Over Email</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default HomeBanner;
App.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HomeBanner from '../elements/HomeBanner';
import Analytics from '../elements/Analytics';
import FeedbackHome from '../elements/FeedbackHome';
class App extends Component {
render() {
return (
<div className = 'index-page'>
<HomeBanner />
</div>
);
}
}
export default App;
Router.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, NavLink, Link, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavBar from './components/NavBar';
import Footbar from './components/Footbar';
import App from './containers/App';
const routing = (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path="/" component={App} />
</Switch>
<Footbar />
</div>
</Router>
)
export default routing;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import routing from './router.js'
ReactDOM.render(routing, document.getElementById('root'));
For referrence I am attaching the normal html template and react template, so that it will help you to understand what things were missed.
Html:
enter image description here
React:
enter image description here
HTML:
enter image description here
React:
enter image description here
If you see above pictures, you will find the missing things on react template. Even I wrote same code for two templates and now also I can inspect that missing elements from my dev tools but its not displaying in the browser.
Remove exact from your Route. Exact will only match the / route with nothing after it, and you're testing on the /right route, which does not match.
<Route path="/" component={App} />

Cannot read props type of 'undefined'

Im trying to pass simple properties from my child component to the parent component . I can't for the life of me understand why I'm getting this error. My understanding of react is that you can declare props (i.e. this.props.text) in any function or class and then pass it to the parent.
Tickerbox.js (child)
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{this.props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
App.js (parent)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Tickerbox from './TickerBox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
day: 'monday',
month: 'january',
year: '1st',
};
}
render() {
return (
<div className="App">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Hi</h2>
</div>
<div className="container">
<div className="row">
<div className="col-sm-2 col-sm-push-3">day</div>
<div className="col-sm-2 col-sm-push-3">month</div>
<div className="col-sm-2 col-sm-push-3">year</div>
<Tickerbox text="test"></Tickerbox>
</div>
</div>
</div>
);
}
}
export default App;
Index.js (entry point)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Tickerbox it's a stateless component.
Stateless components are declared as function
you are trying to access to this.props.text but you already have the props in the arguments props
Instead of use this use the props passed that are the actual props for that component
Tickerbox.js
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
Issue is we cannot access this.props.text in functional components. It should either be props.text or make it a class based component.
<h1>{props.text}</h1>;

Redux Form Simple Fields

I have a simple Redux Form and tried to follow the example given here https://redux-form.com/6.2.0/docs/GettingStarted.md/ here is my code
user-form.js
import React from 'react';
import {Field, reduxForm} from 'redux-form';
class UserForm extends React.Component {
/**
* User Form goes here...
*/
render() {
const { handleSubmit } = this.props;
return (
<form role="form" onSubmit={handleSubmit}>
<div className="box-body">
<div className="form-group">
<label htmlFor="name">Full Name</label>
<Field
name="name"
component="input"
type="text"
className="form-control"
placeholder="Enter full name..."/>
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<Field
name="email"
type="email"
component="input"
className="form-control"
placeholder="Enter email"/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<Field
name="password"
type="password"
component="input"
className="form-control"
placeholder="Password"/>
</div>
</div>
<div className="box-footer">
{/* <button type="submit" className="btn btn-primary">Save</button> */}
<button type="submit" className="btn btn-primary" value="Save">Save</button>
</div>
</form>
);
}
}
UserForm = reduxForm({
form: 'user'
})(UserForm);
export default UserForm;
Above Form is rendered by a UserPage Container
user-page.js
import React from 'react';
import Page from '../../page';
import UserForm from '../components/user-form';
import UserList from '../components/user-list';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import UserAction from '../actions';
import {showLoading, hideLoading} from 'react-redux-loading-bar';
/**
* We might want to create an Abstract Form component to
* include all common form features.
*/
class UserPage extends Page {
handleUserSubmit(values) {
console.log(values);
}
/**
* Content is loaded into page
*/
content() {
return (
<div className="row">
{/* left column */}
<div className="col-md-6">
{/* general form elements */}
<div className="box box-primary">
<div className="box-header with-border">
<h3 className="box-title">New User</h3>
</div>
{/* /.box-header */}
<UserForm onSubmit={this.handleUserSubmit}/>
</div>
{/* /.box */}
</div>
{/*/.col (left) */}
{/* right column */}
<div className="col-md-6">
{/* UserList made of <User /> */}
{this.userList()}
{/* /.box */}
</div>
{/*/.col (right) */}
</div>
);
}
}
const mapStateToProps = (state) => ({ //this gets state from reducer and maps to props
users: state.userList.users,
fetched: state.userList.fetched,
error: state.userList.error
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators({
dispatchShowLoading: showLoading,
dispatchHideLoading: hideLoading,
dispatchUserList: UserAction.userList
}, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(UserPage);
My Form successfully renders and I can see all the actions being dispatched inside the Redux Dev tools window, but when I try to enter text into the fields it won't do any thing, however the actions are dispatched like I said.
Sorry if this sounds a very basic question. I am relatively new to React and Redux and for that matter to Javascript.
In order to make redux form work, its reducer needs to be included and I forgot to include one, this fixed my issue.
import { reducer as formReducer } from 'redux-form';
const allReducers = combineReducers({
form: formReducer,
});
export default allReducers;

Categories