in the Code below I am trying to use Link. The problem is, the first Link element does work, while the second Link element inside the map does not work. It does nothing when clicking on it. I searched a lot on different websites but could not find a reason why that is the case. Can anyone explain to me why this is the case and if there is a solution to my problem?
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<div className={style.dataItem} key={value.id}>
<p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
</div>
);
})}
</div>
</div>
)
Thanks in advance
Alexej
You should use Link element on top lavel at least to provide a much wider hit area to click:
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<Link to='/test' key={value.id}>
<div className={style.dataItem}>
<p>{value.last_name}, {value.first_name}</p>
</div>
</Link>
);
})}
</div>
</div>
)
Your code is working here in my CodeSandbox. The problem must be somewhere else.
I found my mistake: The handleFocusOut function, that is executed onBlur, was used to hide the window in which there is the link I wanted to select. The onBlur was executed before the Link element, hid the window and therefore nothing happend after clicking on the link. I am now pausing the handleFocusOut function for 100ms so that the link gets executed first and now it works. I know this is not the best solution but it is the only one that worked unitl now. I will search for a better one. Thanks everyone for helping me :)
Related
I need to do animation where my grid items will shrink and expand on scroll like this https://k72.ca/en/work, I have no progress for now can anyone give me a hint or help me to find package for it or tell me how should it be done?
my list looks like this:
{projects?.map((projectData) => {
const project = tData(projectData)
const slug = toKebabCase(
`${projectData.en?.client}-${projectData.en?.project}`
)
return (
<div
key={projectData.id}
className="projects-grid-item"
style={{
backgroundImage: `url(${project?.mainImage})`,
}}
>
<div className="project-content-wrapper">
<div className="nox-h-4">
<Link href={`${PROJECTS_ROUTE}/${slug}`}>
<a>
{project?.client} - {project?.project}
</a>
</Link>
</div>
<div className="additional-info-wrapper nox-body-1">
<div className="services">
{project?.services}
</div>
<div>{project?.year}</div>
</div>
</div>
</div>
)}
A good first step would be looking into the Intersection Observer API. It provides a way to track elements captured in the current viewport.
A second step might be to use an observer instance to change classes of elements in order to trigger the transitions that you're looking to implement.
so currently I'm trying to link a particular section of another component page to an img when the image is clicked. Right now i'm doing this in the below component which takes me to the questions/1234 page but not to the exact section of questions/1234
handleClick(event) {
this.props.history.push('/questions/1234')
}
render() {
<img src={"/public/123"} onClick= {event =>
this.handleImageClick(event)} className="thumbnail"/>
/>
}
The component I'm linking the image to when clicked is
render() {
<div id="one">
1
</div>
<div id="two">
2
</div>
<div id="three">
3
</div>
}
And i would like to make it so that when I click on the image in the first component, this would lead me to the div "two" of the other component. How can I do this? Please Remember this is React
If I understand your question correctly then this should be possible by specifying a hash in the path of the page being navigated to.
If the hash value matches an element id in the page being navigated to, then the browser should automatically scroll to that element to ensure it's visible:
handleClick(event) {
/*
Adding #two causes browser to ensure that <div id="two"> is visible
after navigation
*/
this.props.history.push('/questions/1234#two');
}
Your sample code looks like reactjs, hence this answer.
What I have had to do in the past is use a library called react-scrollable-anchor. Check it out here
So in your case it'll probably look like so:
import ScrollableAnchor from 'react-scrollable-anchor';
// your other stuffs...
render() {
return <ScrollableAnchor id="one">
<div>
1
</div>
</ScrollableAnchor>
<ScrollableAnchor id="two">
<div>
2
</div>
</ScrollableAnchor>
<ScrollableAnchor id="three">
<div>
3
</div>
</ScrollableAnchor>
}
Note: Your render methods look weird without a return.
In the off chance that you're using Angular, which I know very little about, you may check out this library https://www.npmjs.com/package/ng2-page-scroll
Also, for something as simple as this you'll expect not to use another library on top of the routing library you already have, guess it's not that simple. Check these github thread out for:
react (using react-router) => https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604
angular => https://github.com/angular/angular/issues/14245
Additionally, your use of onClick event on the img tag feels a bit forced (js overuse) to me. Is there reason you're not doing as #John Rudell suggested in his/her/their comment? i.e wrapping your image in an anchor like so:
handleClick(event) {
// Not today we're just going to use an anchor for this
// this.props.history.push('/questions/1234')
}
render() {
<a href="/questions/1234#two >
<img src={"/public/123"} className="thumbnail" />
</a>
}
Note: technically, there's talk that the above is not a valid html as per dom nesting rules. Nesting an inline-block inside of an inline element. There are solutions to this. I just didn't want to distract from the simple idea of using the right tools.
In case OP or anyone else is wondering, a solution might be:
render() {
<div style={{ position: "relative" }} >
<img src={"/public/123"} className="thumbnail" />
<a
href="/questions/1234#two
style={{
position: "absolute",
top: 0,
bottom: 0,
width: "100%"
/>
</div>
}
Hope it helps.
I am attempting to add a sibling <DeviceControls/> component alongside my <MapContainer/> component. But when when I do so the OpenStreetMap / Leaflet map disappears from the DOM and all that shows on the page is the contents of the <DeviceControls/>component.
This is especially confusing as I appear to be doing the same thing as the offfical examples from PaulLeCam/react-leaflet (https://github.com/blob/70cd9f32bb6461df65b0d07b9810d5e9ddf459ad/example/components/index.js)
const examples = (
<div>
<h1>React-Leaflet examples</h1>
<h2>Popup with Marker</h2>
<SimpleExample />
<h2>Events</h2>
<p>Click the map to show a marker at your detected location</p>
...
<EventsExample />
<h2>WMS tile layer</h2>
<WMSTileLayerExample />
</div>
)
Where there are many React components alongside many Map components and they all display on the page fine.
Can anyone see why it doesn't work when I try this same thing? ie why does wrapping my <MapContainer/> in a <div> make the <MapCOntainer/> component seem to disappear in my code but not the official example code?
render() {
return (
<div>
<MapContainer />
<DeviceControls />
</div>
);
}
The was happening because the <div> wrapping the <MapContainer />
<DeviceControls /> needs a height set on it. Changing it to <div style={{ height: '100%'> solves this problem.
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
I'm trying to append the contents of a container from one to the other without losing any sort of binding and I'm scratching my head wondering why it's so difficult :D
<div class="container">
<div class="field">
<label>Password</label>
<input type="username" />
</div>
</div>
<div class="container">
<div class="field">
<label>Password</label>
<input type="password" />
</div>
</div>
// This puts the actual container in, I need the inner contents of it
$('.container').eq(0).append($('.container').eq(1));
// This loses any sort of binding that applies to what I'm moving
$('.container').eq(0).append($('.container').eq(1).html());
// This screws up the HTML
$('.container').eq(0).append($('*', $(container).eq(1)));
Seems like such a simple and common task but I've got no idea how to get around this? My first answer would be to wrap the content in another container and move that instead.
What d'ya think? Am I going mad or is this impossible? :D
This should do what you want:
$('.container').eq(0).append($('.container').eq(1).children());
JSBin Example - You'll notice the change function still works on the appended field.