Develop Reference

I want to hide location bar, search bar, sell button except logo from PostAd.js page

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!

how to use data-target and data-toggle in Reactjs?

I was converting a static HTML site which uses bootstrap to React.js
Here there are several divs which do open only on data-target and data-toggle.
<div className="card-header" id="headingFive">
<h5 className="mb-0">
<button
className="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseFive"
aria-expanded="true"
aria-controls="collapseOne">
Site Wide Events
</button>
</h5>
</div>
<div
id="collapseFive"
className="collapse show"
aria-labelledby="headingFive"
data-parent="#accordionThree">
<div className="card-body">
<div className="row">
<div className="col wall">
<h4 className="text-center">12</h4>
<p className="text-center">Target</p>
</div>
<div className="col">
<h4 className="text-center">13</h4>
<p className="text-center">Actual</p>
</div>
</div>
</div>
</div>
I don't want to use any other npmmodule for the same.
I tried this but was not able to solve.
componentDidUpdate() {
$('.collapse').bootstrapToggle();
}

Bootstrap 5 (update 2020)
jQuery is no longer required so Bootstrap 5 is easier to use in React. Use the new namespaced data-bs- attributes as explained here or, with React's useEffect useState hooks as explained in this answer.
Bootstrap 4 (original question)
If you don't want to use jQuery or react-bootstrap, you can create a method to toggle the show class on the collapsing Navbar like this...
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = { showNav: true };
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
showNav: !this.state.showNav
})
}
render() {
const { showNav } = this.state
return (
<div className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" onClick={this.toggleNav}>
<span className="navbar-toggler-icon"></span>
</button>
<div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
);
}
}
Example with Navbar Collapse
Example with Collapse

// Import the following in your App.js
import 'jquery/dist/jquery.min.js'; // Have to install and import jQuery because of bootstrap modal's dependency
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Bootstrap dependency https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
Note: I am assuming that your structuring is correct.

Change data-toggle to data-bs-toggle and data-target to data-bs-target. Just managed to find this out myself after looking for ages and not finding a solution anywhere!

Use the new namespaced data-bs- attributes
eg.
<button className='btn btn-outline-info btn-block' data-bs-toggle='modal' data-bs-target='#add'> <i className='fas fa-plus'>Add</i> </button>

Using React.JS with Materialize v1.0.0 unable to init JS

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:

Module not found: Can't resolve './components/player' in '.../score-board-app/src/components'

I use Create-React-App to build a small React application. The full code is stored in github
My file structure:
src
components
Players.js
Player.js
App.css
App.js
index.css
index.js
...
App.js:
import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './components/Header';
import Players from './components/Players';
const App = (props) => (
<div className="scoreboard">
<Header title={props.title} />
<Players />
</div>
);
App.propTypes = {
title: PropTypes.string.isRequired
};
export default App;
Player.js:
import React from 'react';
const Player = (props) => (
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
);
export default Player;
Players.js:
import React from 'react';
import Player from './components/Player';
const Players = () => (
<div className="players">
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
<div className="player">
<div className="player-name">
Juan Li
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">30</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
</div>
)
export default Players;
And the line import Player from './components/Player'; leads to this error:
But if I put this line on top of App.js file, it doesn't report such compiling error. I really want to know what's the issue indeed with my code?

Your file path is wrong. Player is in the same folder as Players, so you need to just say import Player from './Player'

Delete the node_modules directory
Delete the package-lock.json file
Run npm install
Run npm start

toggle classes in ReactJS

I am trying to toggle the className to 'active' on clicking the 'Follow' button. I have tried following the tutorials and guides on the react website and other references but had no luck. Below is my code:
import React from 'react';
import styles from './Cover.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import Avatar from './Avatar';
import { Button } from 'react-bootstrap';
#withStyles(styles)
class Cover extends React.Component {
render() {
return (
<div className="Cover">
<div className="Cover-container">
<div>
<Avatar
username="hilarl"
profession="Web Developer"
location="New York, New York"
status="I am here to protect my business, a bunch of kids are out to ruin me" />
<div className="Cover-submenu-container">
<div className="Cover-submenu-section">
.
</div>
<div className="Cover-submenu-section links">
<a href="#" className="Cover-submenu-link">
<i className="fa fa-twitter"></i>
</a>
<a href="#" className="Cover-submenu-link">
<i className="fa fa-facebook"></i>
</a>
</div>
// follow button
<div className="Cover-submenu-section connect-menu">
<Button className="follow-btn" href="#">Follow</Button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Cover;
Would be great if somebody could helpout with this. Thanks

you render the Button with the active class.
render () {
let isFollowing = this.state.isFollowing
...
<Button className={`follow-btn ${isFollowing? ' active':''}`} ...
all you need to do now is to update isFollowing on button click.