I am new to React Js, I want to open a drop down box which may contain buttons, input fields, e.t.c but the issue is that I have tried model dropdown and many solutions but that does not attach exactly to the bottom of the element opening the dropdown when it is clicked. Another problem is that the component it is contained is just max 50px height so the model should be floating over that component.
In the Image attached the box is opening when open is clicked and the upper blue strip component contain the code but its is displaying on both
just want the box that can contain elements and position exactly under the element it is opened by
import React from "react"
import UserTopBar from "./UserTopTab"
import BelowSection from "./BelowSection"
const Parent =()=>{
<UserTopBar />
<BelowSection />
}
export default Parent
//Top Bar
import React from 'react';
import Notification from '../Notification'
import { NavLink } from 'react-router-dom'
import { QuestionCircleFilled, CloseOutlined } from '#ant-design/icons';
class UserTopTab extends React.Component {
render() {
return (
<>
<div className="d-inline-flex" style={{ background: "#242F84", width: "100%", zIndex: "990" }}>
<NavLink to="/" className="Cambium ">
<p className="mb-0 px-2 White" >Title</p>
</NavLink>
<NavLink to="/AllSearches" className='tab my-auto TabStyle'>
<p className="mb-0 FS_20 px-2 White" >All Searches</p>
</NavLink>
<NavLink to="/AllSearches" className='tab my-auto TabStyle'>
<p className="mb-0 FS_20 px-2 White" >Untitled 1</p>
</NavLink>
{this is toogle button when clicked it will open a dialogue box attached to its bottom}
<button type="button" className="mb-0 FS_20 px-2 White" >Open +</button>
{*innerpart of the box*}
<Notification />
<p className="mb-0 Help"><QuestionCircleFilled /></p>
</div>
</>
);
}
}
export default UserTopTab;
//Second Section
import React from 'react';
const BelowSection =()=>{
<div>
<h1>bellow Section is displayed here </h1>
</div>
}
export default BelowSection
Replace the button that is used to open the box with the target button bellow you can do any thing inside the dialogue box that is opened
<div class="dropdown newTab">
<button type="button"
className="mb-0 FS_20 px-2 White Grey border-0 h-100 dropdown-toggle"
id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
style={{ backgroundColor: "#050A30" }} >Open +</button> //target from where you want to place the buton
<div class="dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
Your inner code to be in here that you
need to display in the Drop down Box
</div>
</div>
Related
I have created a component which basically generates a card which includes card title,card description and a button. Now when I map through an array on a different component to generate those cards I want the button to be different on different components. Like on home page the button should say Update, on other page the button should say Delete. How can I acheive that? Here is the component which generates card.
import React from 'react';
import { Card } from 'react-bootstrap';
const InventoryItem = ({ product }) => {
const { productName, productImage, productPrice, productQuantity, productSupplier, productDetails } = product;
return (
<div className='col-12 col-md-6 col-lg-6'>
<Card className='h-100 items-card d-block d-md-block d-lg-flex flex-row align-items-center border border-0'>
<div className='text-center card-image-container'>
<Card.Img variant="top" src={productImage} className='card-image img-fluid' />
</div>
<Card.Body className='card-details'>
<Card.Title>{productName}</Card.Title>
<Card.Text>{productDetails}</Card.Text>
<div className='d-lg-flex align-items-center justify-content-between mb-3'>
<p className='mb-0'>Price: ${productPrice}</p>
<p className='me-2 mb-0'>Stock: {productQuantity}</p>
</div>
<div className='d-flex align-items-center justify-content-between'>
<p className='mb-0'>Supplier:{productSupplier}</p>
<button className='btn btn-dark'>Update</button>
</div>
</Card.Body>
</Card>
</div>
);
};
export default InventoryItem;
Pass the button text as a prop to the component, so consuming code can speficy the text for the button.
Add it as a prop:
const InventoryItem = ({ product, buttonText }) => {
And use it in the button:
<button className='btn btn-dark'>{buttonText}</button>
Then when using the component, pass the prop:
<InventoryItem product={someProductObject} buttonText="Update" />
or with a conditional value:
<InventoryItem product={someProductObject} buttonText={someCondition ? "Update" : "Delete"} />
You can define a condition for the button basaed on the page you are:
window.location.href return the string href.
const MyButton= window.location.href=='Home'
? <button> HOME</button>
: <button> UPDATE</button>
Hope that answer your question,
Mauro
I am trying to implement a side-menu that would expand a "table" of items when you hover over one of its items. I'm using TailwindCSS and React.
The problem I'm facing is that the menu does not expand when I hover over the button.
I've made the sub-menu a child of the button so that I could use the group-hover functionality, but it does not work. I already added display: ['hover', 'focus'] to the variants config, so, that can't be the problem.
// SideMenuItem.js
import React from "react";
function SideMenuItem() {
return (
<button className="group static m-2 w-16 h-16 bg-red-400"> A
<div className="hidden group-hover:block relative top-0 left-24 w-48 z-10 flex flex-row flex-wrap bg-gray-300">
<button className="m-2 h-16 w-16 bg-gray-200">Item 1</button>
<button className="m-2 h-16 w-16 bg-gray-200">Item 2</button>
<button className="m-2 h-16 w-16 bg-gray-200">Item 3</button>
</div>
</button>
);
}
export default SideMenuItem;
Desired Output:
I have found this code sample from an article.
https://codesandbox.io/s/59574892-so-n-number-of-dropdowns-9hkt3
Try to understand what the man did and write it on your own.
Best of luck!
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'm making my web resume using react having parent div like this -
<div
className={`w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `}
>
In this I have multiple child div but when I run my code the elements of div are scrolling rather than the page.When I give height to parent div but it's not working fine on some browsers.I need a good solution so that elements remain static and page scrolls.
Thanks in advance.
https://utkarsh0911.github.io/my_web_resume/
Remove the background-attachement propery of the class 'landing_container__23Tq8' in your css.
You can try to update src/Pages/LandinPage.js with the following snippet.
import React, { Component ,Text,StyleSheet} from 'react'
import Logo from '../Images/SiteLogo/logo.jpg'
import MyNav from '../Components/MyNav'
import styles from '../css/landing.module.css'
import { Button, Container } from 'react-bootstrap'
import MyButton from '../Components/MyButton'
import Myphoto from '../Images/MyPhoto/photo.png'
import MyRoundedImage from '../Components/MyRoundedImage'
import AboutMe from './AboutMe'
import Experience from './Experience'
import Skills from './Skills'
import MySimpleImage from '../Components/MySimpleImage'
import Education from './Education'
import resume from '../docs/resume.pdf'
import MyFooter from '../Components/MyFooter'
import MyJumbo from '../Components/MyJumbo'
class LandingPage extends Component
{
render() {
return (
<div className={ `w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `} >
<div className="container ">
<MyNav title="MyResume" items={["ABOUT","BLOG","CONTACT"]}/>
</div>
<div className="d-flex justify-content-center ">
<h1 className={`font-weight-bold text-white text-center ${styles.h1}`}>WELCOME TO MY STUDIO!!</h1>
</div>
<div className="d-flex flex-wrap justify-content-center mt-2 ">
<a href={resume} target="_blank" rel="noopener noreferrer" download>
<MyButton title="Download CV" variant="success"/></a>
<MyButton title="Subscribe" variant="success"/>
</div>
<div className="d-flex flex-wrap clearfix mt-1 flex-wrap justify-content-center align-items-center">
<MyRoundedImage src={Myphoto}/>
</div>
<div className="bg-white">
<AboutMe />
<MyJumbo title="EXPERIENCE"/>
<div className={styles.expContainer}>
<Experience/>
</div>
<MyJumbo title="SKILLS"/>
<Skills/>
<MyJumbo title="EDUCATION"/>
<Education/>
</div>
{/* <MyFooter/> */}
</div>
)
}
}
export default LandingPage
Basically, the scrolling is fine; however, a background is missing from the About Me section onwards.
Good Luck...
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.