I have a button function inside the component 'CZButton', the button is used in "personlist" for a pop up, I am trying to make the div card inside of either 'personlist' or 'person' clickable so that instead of clicking the button, the div would be clicked and shows the drawer pop up.
I tried adding onclick inside divs and but it did not seem to reach the drawer function. here is a sandbox snippet, would appreciate the help.
https://codesandbox.io/s/l9mrzz8nvz?fontsize=14&moduleview=1
You can add an onClick listener in React just by writing something like:
// omitting the rest of the render function for brevity
return (
<div className="row" onClick={e => console.log("Clicked")}></div>
);
Just be careful with the HTML semantics. Although it is possible, I wouldn't really recommend adding onClick events to a div. There are good resources online about HTML5 standards and what you should adhere too.
Live Demo: https://n329k226om.codesandbox.io/
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.test = this.test.bind(this);
}
test() {
alert("function executed on clicking div");
}
render() {
return (
<div>
<div
onClick={() => this.test()}
className="interactivediv fa fa-window-close"
>
div
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.interactivediv {
height: 150px;
width: 150px;
background: rgb(68, 196, 196);
cursor: pointer;
border: 1px solid grey;
}
.interactivediv:active {
border: 2px solid black;
}
Related
I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.
Here is my code:
import * as React from "react";
import Slider from "#mui/material/Slider";
import "./style.css";
export default function ContinuousSlider() {
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Slider
aria-label="Volume"
value={value}
onChange={handleChange}
focusVisible={false}
/>
);
}
style:
.MuiSlider-thumb {
background-color: orange;
box-shadow: none;
width: 0px;
height: 0px;
}
.MuiSlider-rail {
background-color: orange;
border: none;
}
.MuiSlider-track {
background-color: red;
border: none;
}
.MuiSlider-rail {
background-color: green;
}
working code here
result:
on focus
I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb.
How can I remove it?
I want the following style always, even when user drag the thumb:
You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)
.MuiSlider-thumb:is(:hover, .Mui-active) {
display: none;
}
Demo
Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}
I am trying to have a whole section of a page act as a link to another page, but I don't want the section to be highlighted in blue when the user hovers over it. No matter what I do it highlights on hover.
JS
import { NavLink } from "react-router-dom";
<NavLink to="/application" className="nohighlight">
<h1 className="puppytitle">
Get your own puppy
</h1>
</NavLink>
CSS
I thought using !important was like the nuclear option for css, but even that is not working.
.nohighlight {
text-emphasis: none;
text-decoration: none;
}
.nohightlight:hover {
text-decoration: none !important;
}
Thank you in advance.
Looks like all you needed to do was define the color of the text. Here's an example:
import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import styled from 'styled-components';
export default function App() {
return (
<div>
<h1>Hello CodeSandbox</h1>
<Router>
<StyledNavLink to='www.google.ca'>testing</StyledNavLink>
</Router>
</div>
);
}
const StyledNavLink = styled(NavLink)`
text-emphasis: none;
text-decoration: none;
color: black;
&:hover {
text-emphasis: none;
text-decoration: none;
color: black;
}
`;
CodeSandbox: https://codesandbox.io/s/stack-63925598-navlink-color-gqop8
How can I place text at the bottom of a div in plain old React (not React Native)?
In html, you can place text at the bottom of a div by using
vertical-align: text-bottom;
In React Native, it looks like you place text at the bottom of a div by using
textAlignVertical: "bottom",
Is there a simple way to place text at the bottom of a div in plain old React?
The only method I got to work so far is is to use Flexbox.
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Codesandbox
Edit: This is a simplified example. What I really need is a div with items in several different spots, and text on the bottom.
Edit: In both HTML and React, vertical-align: text-bottom; does not move text to the bottom of a div. It only shifts the text down a little bit to the bottom of where the text would normally be. So in both HTML and React, it can be used to shift text down a little for a subscript. But in both HTML and React, it can't be used to shift text way down to the bottom of a div.
You could use margin:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
marginTop: 'auto'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Or align-self:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
alignSelf: 'flex-end'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
I noticed you mentioned the div has lots of other information in a more complicated example. I would highly recommend trying out css grid if you haven't already. It allows you to structure the items on your screen very easily.
Here's an example using grid to create the 'holy grail layout' which is by no means the best example but it shows how easy it is to structure divs in different areas of the screen.
https://codepen.io/frazermg/pen/bXbXOR?editors=1100
.container {
display: grid;
grid-template-areas: 'header header header header'
'left content content right'
'left content content right'
'footer footer footer footer';
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(30vh, auto);
}
.header {
background-color: blue;
grid-area: header;
}
.left {
background-color: green;
grid-area: left;
}
.content {
background-color: #eee;
grid-area: content;
}
.right {
background-color: pink;
grid-area: right;
}
.footer {
background-color: orange;
grid-area: footer;
}
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
Here is an example of nested grids:
https://codepen.io/frazermg/pen/ZgEwVd
This website is very useful for all things css, especially flexbox and grid.
https://css-tricks.com/snippets/css/complete-guide-grid/
I hope this can help you!
What about simply style any span or component with text inside a div like this:
... style={{position:"absolute",bottom:"0px"}} ...
I am fairly new to React and I am stuck in styling a component using styled components.
const SearchBarContainer_Button = styled.button`
padding: 10px;
margin-left: 10px;
width: 300px;
`;
<ButtonOne
style={SearchBarContainer_Button}
type="submit"
className="search-bar__button"
>
{this.props.buttonText || 'search'}
</ButtonOne>
Here is what I have in my ButtonOne:
import React from 'react';
import styled from 'styled-components';
const Button_One = styled.button`
cursor:pointer;
border: none;
background-color: #fff;
color: #000;
font-size: 12px;
font-weight: 900;
`;
export const ButtonOne = (props) => (
<Button_One className={props.className}>{props.children}</Button_One>
);
I have no idea what I am doing wrong, and I would really appreciate some guidance.
Thank you.
Hmm did you read the documentation for styled components? they are styled COMPONENTS
which means when you specify
const Button_One = styled.button`
cursor: pointer
`
you need to use it as component
<Button_one ...props />
You can't pass style={StyledComponent} it's component not object literal with style. IF you want to extend the styled components here is the link https://www.styled-components.com/docs/basics#extending-styles
When used styled-components, you're creating a new component with a certain styles. For your search bar, you're creating a component named SearchBarContainer_Button as that is your variable name. You do not need to add the style again. Try reviewing the documentation, or reference this example;
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;
And to use your component Title with the specified styles:
<Title>Content of component</Title>