I expect that the text of the p tag inside the Link to be white, but for some reason the link text won't display. It appears to be hidden and only displays once I hover over the button. When I hover it is only barely visible. Can it be due to the <Link>?
I have appended the code and a picture that shows my button below.
Any help would be greatly appreaciated :)
Index.js file
<div class="py-4">
<Button>
<div className="p-1">
<Link to="/contact">
<p>Get in contact</p>
</Link>
</div>
</Button>
</div>
Button component:
import React from 'react';
const sizes = {
default: `py-3 px-8`,
lg: `py-4 px-12`,
xl: `py-5 px-16 text-lg`
};
const Button = ({ children, className = '', size }) => {
return (
<button
type="button"
className={`
${sizes[size] || sizes.default}
${className}
bg-primary
hover:bg-primary-darker
rounded
text-white
`}>
{children}
</button>
);
};
export default Button;
picture of button, which should show get in contact
try this :
<Link to="/contact" style={{color:'#fff'}}>Get in contact </Link>
or add your own className with the color u wanna use
Related
Here is the header section of my website-to-be.
Primary goal:
To hover over an icon and change the Logo text in the top right to reflect the icon which is being hovered over. For example, hovering over the second icon </> will change 'edwindharris' to 'projects'. The default needs to be 'edwindharris'.
Secondary goal:
For the transition between the changing headings to be a quick (.2s ish) fade.
Here is the incomplete code I have so far, which I would greatly appreciate help in completing:
const HeaderDesktop = () => {
const homeHeading = {
default:'edwin' + '<em>d</em>' + 'harris',
home: 'home',
projects: 'projects',
design: 'design',
about: 'about'
}
const Logo = () => {
return (
<LogoContainer>
<span dangerouslySetInnerHTML={{__html: homeHeading.default}}/>
</LogoContainer>
);
}
return (
<DesktopHeader>
<Link to={'/'}><HomeSvg/></Link>
<Link to={'/projects'}><ProjectsSvg/></Link>
<Link to={'/design'}><DesignSvg/></Link>
<Link to={'/about'}><AboutSvg/></Link>
<Logo/>
</DesktopHeader>
);
}
export default HeaderDesktop;
I have removed attempts at implementing a fade / changing the text on hover so as to keep this post clear. Everything I have tried before posting has not been pretty!
Note: LogoContainer & DesktopHeader and the Svgs are Styled Components.
Thank you for your time.
Store heading value in a state and then update the heading with relevant value on onMouseEnter and onMouseLeave.
Example:
import {useState} from "react";
const HeaderDesktop = () => {
const defaultHeading = 'edwin' + '<em>d</em>' + 'harris'
const [heading, setHeading] = useState(defaultHeading)
const Logo = ({heading}) => {
return (
<LogoContainer>
<span dangerouslySetInnerHTML={{__html: heading}}/>
</LogoContainer>
);
}
const setDefaultPageHeading = () => setHeading(defaultHeading)
return (
<DesktopHeader>
<Link to={'/'}><HomeSvg/></Link>
<Link to={'/projects'}>
<span
onMouseEnter={()=> setHeading('projects')}
onMouseLeave={setDefaultPageHeading}
>
<ProjectsSvg/>
</span>
</Link>
<Link to={'/design'}>
<span
onMouseEnter={()=> setHeading('design')}
onMouseLeave={setDefaultPageHeading}
>
<DesignSvg/>
</span>
</Link>
<Link to={'/about'}>
<span
onMouseEnter={()=> setHeading('about')}
onMouseLeave={setDefaultPageHeading}
>
<AboutSvg/>
</span>
</Link>
<Logo heading={heading}/>
</DesktopHeader>
);
}
export default HeaderDesktop;
I wanted to emulate a Google Photos gallery style in my project. Where if I click on an image it will provide a partial view, but when I click on another image the first partial view is replaced by the new image and data.
The structure of my code is that I have a set of components Pictures that contains another component PartialView, I have an onClick function that checks if that picture is clicked, the PartialView component will appear. However, I don't know how to manage the states so that when I click on another different image, the opened PartialView will close and the other component's PartialView will open instead.
My current bug is that I can open both PartialView at the same time, and they end up overlapping. I just want the newly clicked Pictures component to have a PartialView opened.
The structure of my code:
// the function that allows me to click on each Picture independently
// state only updated on Picture id
const [open, setOpen] = useState(false);
function openFunction (id) {
setOpen({
...open,
[id]: !open[id],
});
}
// each Picture component made from different inputs from server
// PartialView will only appear if Picture is clicked
let pictures = null;
if (userData) {
pictures = userData.map(
({ artefactName, artefactImg, description, artefactDate, _id }) => (
<article
className="card-container"
onClick={() => openFunction(_id)}
style={{ padding: open[_id] ? '0 0 480px 0' : '0 0 0 0' }}
>
<div>
<div className="card">
<img src={artefactImg.imgURL} />
<div className="card-title">
<p>{artefactName}</p>
</div>
</div>
<div style={{ display: open[_id] ? 'block' : 'none' }}>
<PartialView title={artefactName} image={artefactImg} desc={description}
date={artefactDate} />
</div>
</div>
</article>
)
);
}
// item Pictures are returned
return (
<main>
<div className="main-container">
<div className="main-cards">
<div className="section-cards">
<div className="feed-cards">
{pictures}
</div>
</div>
</div>
</div>
</main>
);
I am trying to hide a PayPal button depending on the state of my switch. At the moment, once the paypal button gets rendered, it always stays there. Regardless of whether the switch gets set back to credit card
Here is the switch:
<p class="heading">Payment Method</p>
<div class="frame flex-row flex-center">
<button
class="flex-column flex-center"
(click)="paymentMethod = 'creditCard'; dismountPaypal()"
[ngClass]="
paymentMethod == 'creditCard' ? 'type-btn-active' : 'type-btn'
"
>
Debit/Credit Card
</button>
<button
class="flex-column flex-center"
(click)="paymentMethod = 'paypal'; renderPaypal()"
[ngClass]="paymentMethod == 'paypal' ? 'type-btn-active' : 'type-btn'"
>
PayPal
</button>
</div>
and here is the button itself:
<div>
<div #paypalRef></div>
</div>
on my component.ts file I've got this to render the button, this function gets called when paypal gets clicked in the switch:
#ViewChild("paypalRef", { static: true }) private paypalRef: ElementRef;
renderPaypal() {
if (this.paypalButtonRendered != true) {
window.paypal
.Buttons({
style: {
layout: "horizontal",
color: "white",
},
})
.render(this.paypalRef.nativeElement);
}
this.paypalButtonRendered = true;
}
I've tried using ngIf on the parent div component and the div of the button itself. This just results in the button never being displayed. I've also tried using [ngClass] snd setting a CSS style to display none if the payment method is credit card, but this also doesn't work. I'm kind of at a loss right now. Any help would be greatly appreciated.
Add the style display: none; to the button you don't want rendered, based on the paymentMethod condition.
react beginner here, here i have antd checkbox, i want to change this checkbox into a button but still have checkbox functionality: here is my checkbox:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
</div>
this is what i tried to do, i tried to give opacity zero to checkbox to hide it and then put checkbox inside a button in order to change the look of it to button and have checkbox functionality, but problem is, this new button is working if you click on the left side of the button but right side is not working, any solution ?
:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<button>
<Checkbox
style={{ opacity: "0" }}
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
Select All
</button>
</div>
If you want the button to do exactly what the checkbox does, simply pass the onCheckAllChange to the button onClick.
<div className="modal-body d-flex flex-column">
<button onClick={onCheckAllChange}>
Select All
</button>
</div>
and your handle change is something like this assuming your state variables are
checkedList, indeterminate, and checkAll:
const onCheckAllChange = (e: any) => {
setCheckedList(!checkedList.length ? allColumnKeys : []);
setIndeterminate(false);
setCheckAll(!checkAll);
};
I use React 16.5.2 and Bootstrap 4.1.3 on my project and I want to have a typeahead on a NavBar. I have implemented the autocomplete field on the NavBar but it did not turn out the way I want it.
It seems that when the list of suggestion came out it will expand the NavBar too.
Another problem is the list of suggestion is on the right side of the input text instead of on the left side. For your information, I'm a React newbie and I'm using react-places-autocomplete to get the list of suggestion.
Most of the typeahead that I found is used outside of Navbar.
Here is the image of the NavBar with the autocomplete field.
Here are some packages that I use:-
React Places Autocomplete - https://www.npmjs.com/package/react-places-autocomplete.
bootstrap 4.1.3 - https://www.npmjs.com/package/bootstrap
Create React App - https://github.com/facebook/create-react-app
Below is a snippet of the code from my SearchForm component:-
render() {
return (
<form className="mx-2 my-auto d-inline w-100" onSubmit={this.handleSubmit}>
{this.state.gmapsLoaded && (
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div className="input-group">
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'form-control border border--0',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
<span className="input-group-append">
<button className="btn btn-outline-secondary border border-left-0" type="button" onClick={this.handleOnClick}>
<FontAwesomeIcon icon={faSearch} />
</button>
</span>
</div>
)}
</PlacesAutocomplete>
)}
</form>
)
}