I'm using React and React Router to build a web app. Currently, the header is is it's own component, and is loaded into the HomePage container with a Page component. I want to render a new component on click of a button in the header inside the page component
This is the mainpage container I have right now
import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from "./Page4";
import {Header} from "../components/Header";
export default class MAINHome extends React.Component {
constructor(props) {
super();
}
render() {
return (
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>
);
}
}
<div id="header" className="container-fluid">
<div className="row">
<div className="col-md-4" id="logo-col">
<img src={require("../assets/LOGO.png")} alt=""/>
</div>
<div className="col-md-8 d-flex justify-content-end" id="nav-col">
<ul>
<li>
<Link to="/trees" id="trees-adopted-nav">
300+ TREES ADOPTED
</Link>
</li>
<li>
<a href="#" className="about-us">
ABOUT US
</a>
</li>
<li>
<a href="#" className="about-trees">
ABOUT TREES
</a>
</li>
<li>
<a href="#" className="contact-us">
CONTACT US
</a>
</li>
</ul>
</div>
<Route path="/trees" exact="exact" component={AdoptTrees} />
</div>
</div>
</Router>
This renders a component inside the header itself, but I want it to render instead of the entire main page itself by replacing
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>
Related
i'm working on some react projects and i've tried to orginize my code by moving some components to another files then import them but when i do that it just give me a blank page , when i write (import Header from "./Header") it starts to give blank page while it was working when i was putting all of the code in index.js only .
this is my main index code:
import Header from "./Header"
import Footer from "./Footer"
import Maincontent from "./Main"
function Page(){
return(
<div>
<Header />
<Maincontent/>
<Footer />
</div>
)
}
ReactDOM.render(<Page/>, document.getElementById("root"))
and this is my header code
export default function Header(){
return(
<header>
<nav className="nav">
<img src="./react-logo.png" className="img" />
<ul className="nav-items">
<li> Pricing </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</header>
)
}
You need to export Header. Try putting export default Header at the bottom of your Header component file.
I want to hide the location bar, search bar, and sell button except for the logo from the PostAd.js page. The only logo should appear on the PostAd.js page. I have posted my code for reference. I just want to show the logo on my PostAd.js page. I'm new and learning React.js
See image for reference:
Header.js
import React, { Component } from 'react';
import { Link } from "react-router-dom";
function Logo() {
return (
<a className="navbar-brand logo" href="#">
<img src={require("../ui/logo.png")} />
</a>
);
}
function SearchAndLocation(props) {
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav flex-2 pr-3">
<li className="input-group input-group-lg location mr-4 flex-1">
<div className="input-group-btn">
<button className="fas fa-search search-ico"></button>
</div>
<input type="text" className="form-control" placeholder="Pakistan" />
<div className="input-group-btn">
<button className="fas fa-chevron-down ico"></button>
</div>
</li>
<li className="input-group input-group-lg search flex-2">
<input type="text" className="form-control" placeholder="Find Mobile, Car ,laptop" />
<div className="input-group-btn">
<button className="fas fa-search ico"></button>
</div>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<h6 className="mr-sm-2 login" >Login</h6>
<button className="my-2 my-sm-0 fas fa-plus sell"> <Link to={"/postad"}>SELL</Link></button>
</form>
</div>
);
}
function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
<SearchAndLocation />
</nav>
);
}
export {
Header,
Logo,
SearchAndLocation
};
PostAd.js
import React, { Component } from 'react';
import { Header } from "../components/Header";
function PostAd() {
return (
<Header></Header>
);
}
export default PostAd;
router.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import PostAd from "../components/PostAd";
class AppRouter extends Component {
render() {
return (
<div>
<Router>
<Route exact path='/postad' component={PostAd} />
</Router>
</div>
);
}
}
export default AppRouter;
You can use conditional rendering by creating variable and set it to false/true so you can hide/display component with &&
function Header() {
const showSearchBar = false
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
{showSearchBar &&
<SearchAndLocation />
}
</nav>
);
}
The basic of react is composing components like lego blocks. If you don't want it on the screen, you can delete the component.
What you need to do:
Delete the SearchAndLocation component from the Header component.
Do this:
function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
<SearchAndLocation /> <--- delete this line
</nav>
);
}
If you want to hide it only in PostAd, then you have 2 solutions:
A. Create new Header specific to be used in PostAd.
B. Create the Header so that it can read the route, and if it is currently in "/postad", you hide the "SearchAndLocation" component.
I think solution A is simpler, let's go with it. What you should do:
Create new header component, for example name it NewHeader. The content should be the same like Header but without "SearchAndLocation".
Export the NewHeader. Use the NewHeader in PostAd component.
Done!
For solution B, what you should do:
In the Header component, use useLocation hooks provided by 'react-router-dom' (I'm assuming you are using it)
Read the path provided by the useLocation.
Create an if-else render logic. If path===/postad, don't render the "SearchAndLocation" component. Else, render it.
Done!
I want to hide app component content when I click on other component pages link.
Right now, when I click other links like about us, then it shows both app component and about us page component. But I want show only about us content once I click on about us page.
Also, when I define App component patch as a "/" then application keeps loading.
Below are the code
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import data from "./data";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
<Navigation />
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img
src={require("./images/" + link.Img)}
className="card-img"
alt=""
/>
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default App;
Navigation.Js Everything is working fine only App home page content show which i don't want when i click other pages
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
render() {
return (
<Router>
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
<Switch>
<Route exact path="/Api" component={Api}></Route>
<Route exact path="/News" component={News}></Route>
<Route exact path="/Website" component={Website}></Route>
</Switch>
</Router>
);
}
}
export default Navigation;
For this to work you need to put content of app.js inside another component because right now it doesnt have a route to hide itself when going to other page. So you need to treat the component just like your rest components (Api.js, News.js) etc..
NewAppComponent.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class Navigation extends Component {
render() {
return (
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
);
}
}
export default Navigation;
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
render() {
return (
<div className="container">
<Router>
<Navigation />
<Switch>
<Route exact path="/" component={NewAppComponent}></Route>
<Route path="/Api" component={Api}></Route>
<Route path="/News" component={News}></Route>
<Route path="/Website" component={Website}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
NewAppComponent.js
// NewAppComponent.js
import React, { Component } from "react";
import data from "./data";
class NewAppComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img src={require("./images/" + link.Img)} className="card-img" alt="" />
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default NewAppComponent;
strong textI have a carousel component that I created in a jsx file. When I go to a different page and navigate back to that page the carousel doesn't re-render. I have tried updating my routes as well as looking into all possible css causes. I see that the carousel container is there but none of the content is showing.
Below is my jsx file:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
import { Button, Icon } from 'react-materialize'
import ReactDOM from 'react-dom'
import './Carousel.css';
class Carousel extends Component {
render() {
return (
<Fragment>
<div>
<div class="row">
<div class="col s12">
{/* <!--Images and carousel items below --> */}
<div width="100%" id="carousel-div" class="carousel userInput">
<div class="left">
<a href="Previo" class="movePrevCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons left middle-indicator-text">chevron_left</i>
</a>
</div>
<a class="carousel-item submitBTN" id="letters" data-search='Sports' href="#letters">
<img height="190" width="400" src="https://toddlermasterclass.com/wp-content/uploads/2015/07/Fun-Games-For-Preschoolers.png"
alt="" />
</a>
<a class="carousel-item submitBTN" id="numbers" data-search='Music' href="#numbers">
<img height="190" width="400" src="http://imgsdown.1mobile.com/group1/M00/A5/58/S36rZlagE-mAOxmfAAQhEBsG6mg860.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="colors" data-search='Technology' href="#colors">
<img height="190" width="400" src="https://i.ytimg.com/vi/e1dHmEJcMG0/maxresdefault.jpg" alt="" />
</a>
<a class="carousel-item submitBTN" id="memory-match" data-search='Food' href="#memory-match">
<img height="190" width="400" src="https://images-na.ssl-images-amazon.com/images/I/713UI4Vy1-L.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="shapes" data-search='Arts' href="#shapes!">
<img height="190" width="400" src="https://i.ytimg.com/vi/AQbnbrTHgtA/maxresdefault.jpg" alt="" />
</a>
<a class="submitBTN btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</a>
<div class="right">
<a href="Siguiente" class="moveNextCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons right middle-indicator-text">chevron_right</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
</Fragment>
)
}
}
export default Carousel;
Below is my router file:
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Parents from './components/Parents';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About'
import Cards from './components/cardGame';
import Carousel from './components/Carousel';
/* import ReactCarousel from './components/ReactCarousel'; */
import ColorGame from './components/colorGame/colorGame';
import NumberGame from './components/NumberGame/numberGame';
const AppRouter = () => {
// class AppRouter extends Component {
// render() {
return (
<Router>
<div>
{/* edit username */}
<Navbar username='User' message='welcome back!'/>
<Route path='/Login' component={Login} />
<Route path='/Home' component={Home} />
<Route path='/About' component={About} />
<Route path='/Parents' component={Parents} />
<Route path='/colorGame' component={ColorGame} />
<Route path='/cardGame' component={Cards} />
<Route path='/numberGame' component={NumberGame} />
</div>
</Router>
)
}
// }
export default AppRouter;
Below is the Home.js file that I'm rendering my carousel in:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Button, Icon } from 'react-materialize'
import './Home.css';
import ReactDOM from 'react-dom';
import Carousel from '../Carousel';
/* import ReactCarousel from '../ReactCarousel'; */
class Home extends Component {
render() {
return (
<Fragment>
<Carousel />
{/* <ReactCarousel /> */}
</Fragment>
)
}
}
export default Home;
Here is the Navbar component
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom'
import './Navbar.css'
const Navbar = props => {
return (
<Fragment>
<nav className="navigation_container">
<div className="l-triangle-top"></div>
<div className="l-triangle-bottom"></div>
<div className="rectangle">
<div className="navigation">
<Link className='nav-item nav-link' to='/Parents'>Parents Place</Link>
<ul className="right hide-on-med-and-down">
<li><Link className='nav-item nav-link' to='/Home'>Home</Link></li>
<li><Link className='nav-item nav-link' to='/Login'>Logout</Link></li>
<li><Link className='nav-item nav-link' to='/About'>About</Link></li>
</ul>
</div>
</div>
<div className="r-triangle-top"></div>
<div className="r-triangle-bottom"></div>
</nav>
</Fragment>
)
}
export default Navbar;
Would someone help me see why the carousel is not rendering when I navigate back to my home page?
Can you show your <Navbar /> component? Since your home path is path='/Home' make sure you have <Link to='/**H**ome'/> in your NavBar
Been trying to convert several of our projects using materialize-css v1.0 using npm into react.js and having a heck of time doing so. I was wondering if anyone else has tried to tackle this as well and maybe came up with some solutions?
I am able to use the css portion just fine using the npm module and referencing it in the Index.js.
The problem I have is initializing the minified js with individual components but having no success. Here is the example one being the Index.js for css entry point and the sidebar component I am trying to get working using minified js. I also provided the App.js configuration in case anyone was curious. The plan was to break each part of this project into individual components but first just wanted to get the functionality of initializing the sidebar js first before doing so.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// import Header from './header/Header';
// import Footer from './Footer';
import Landing from './landing/Landing';
import About from './About';
import Projects from './Projects';
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<div>
{/*<Header />*/}
<Route exact path="/" component={Landing} />
<Route exact path="/about" component={About} />
<Route exact path="/projects" component={Projects} />
{/*<Footer /> */}
</div>
</BrowserRouter>
</div>
);
}
}
export default App;
Landing.js
import React, { Component } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
// import { Link } from 'react-router-dom';
import './Landing.css';
class Landing extends Component {
componentDidMount() {
console.log(M);
const sideNav = document.querySelector('.button-collapse');
console.log(M.Sidenav.init(sideNav, {}));
M.Sidenav.init(sideNav, {});
}
render() {
return (
<div className="main-header">
<div className="primary-overlay">
<div className="navbar-fixed">
<nav className="transparent">
<div className="container">
<div className="nav-wrapper">
<a href="#home" className="brand-logo">
TEST
</a>
<a data-activates="side-nav" className="button-collapse">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
<li>
<a className="btn blue">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
{/* Side Nav: fixed navbars must go right underneath main nav bar */}
<ul id="side-nav" className="side-nav">
<h4 className="blue-grey darken-4 center">TEST</h4>
<li>
<a className="divider" />
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
{/*-- Showcase */}
<div className="showcase container">
<div className="row">
<div className="col s12 main-text">
<h5>You found the...</h5>
<h1>Right Place To Start</h1>
<p className="flow-text">
To take your business to the next level with our services that
have taken companies to the fortune 500
</p>
<a href="#about" className="btn btn-large white black-text">
Learn More
</a>
<a href="#contact" className="white-text">
<i className="material-icons medium scroll-icon">
arrow_drop_down_circle
</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Landing;
Here are some screen shots I am getting with errors in my console as well regarding the anchor tags (not sure how I work around this if its needed in the side bar). I am getting access to the sidebar as per the console.logs shown below.
​Hope someone else has encountered this problem already and can help...
Cheers!
[![enter image description here][3]][3]
The trigger button markup is incorrect. It has to be data-target and it has to have the class sidenav-trigger. Also the side nav has to have the classname sidenav. side-nav with a hyphen will not work:
<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
<i className="material-icons">menu</i>
</a>
Also you should always use refs instead of querying the DOM yourself when working with react. Apply a ref callback to the sidenav element and then use it to initialize:
class Landing extends Component {
onRef = nav => {
this.nav = nav;
M.Sidenav.init(nav);
};
render() {
return (
{/* ... */}
<ul ref={this.onRef} id="side-nav" className="sidenav">
<li><a className="divider" /></li>
{/* ... */}
</ul>
{/* ... */}
);
}
}
Working example with your corrected markup: