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.
Related
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 am trying to use a react component in my my PHP laravel project but the component does not show
It keeps showing a blank area but so I tried inserting an h1 tag in the div block of the id='footercomp' but nothing also works in it.
I run
composer laravel/ui react
npm install
npm run dev
php artisan ui react
HTML
<footer class="footer-section">
<div id='footercomp'>
</div>
</footer>
<script src="js/app.js" type="text/javascript"></script>
app.js
require('./bootstrap');
require('./components/FooterComp')
FooterComp
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
export default class FooterComp{
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-6 order-1 order-md-2">
<div className="footer-social-links">
<i className="fa fa-pinterest"></i>
<i className="fa fa-facebook"></i>
<i className="fa fa-twitter"></i>
<i className="fa fa-dribbble"></i>
<i className="fa fa-behance"></i>
<div className="col-md-6 order-2 order-md-1">
<div className="copyright">
Copyright ©
<script type="fdd38016b2c0a37d3fefa1a8-text/javascript">
document.write(new Date().getFullYear());
</script>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default FooterComp
if (document.getElementById('footercomp')){
ReactDOM.render(<FooterComp />,document.getElementById('footercomp'));
}
Did you try to add app.js in your layout file ?
I was having same issue and found out that didn't added app.js
I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue
It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />
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:
I'm trying to make a responsive navbar.
In desktop shows the NavItems in the NavBar, but in small devices shows the sandwich icon and when we click it should show the same NavItems.
However, when I click on the button, nothing happens.
I was making an adaption of this tutorial:
https://www.youtube.com/watch?v=oUKJA6B1Xr4
The view look like this:
small devices version
desktop version
My NavBar.js
import React, {Component} from 'react';
import NavItems from "./NavItems";
class NavBar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-default panel-app">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
data-target="#nav-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">Hoje para jantar</a>
</div>
<div className="collapse navbar-collapse" id="nav-collapse">
<NavItems className="nav navbar-nav" data-toggle="collapse" data-target=".in" href=""></NavItems>
</div>
</nav>
</div>
);
}
}
export default NavBar;
My NavItems.js
import React, {Component} from 'react';
class NavItems extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ul>
<li className="nav navbar-brand">Receitas</li>
<li className="nav navbar-brand">Por categoria</li>
</ul>
);
}
}
export default NavItems;
I forgot to put the jquery link in the index.html file.
Now it works :)