Welcome.
I just started to learn ReactJS, for the first few attempts, it was okay, but since a few hours, every time, when I create a new component, after I define the exact component and gives it content, when I attempt to use it in the App.js, or anywhere (after importation, of course), it displays a few components, but not all, either I refresh it.
The only solution is, if I delete the closing bracket of the return statement, save it, wait for the error on the development server, then write it back.
e.g.
function MainNavigation() {
return (
<header>
<div>React Meetups</div>
<nav>
<ul>
<li>
<Link to="/">All Meetups</Link>
</li>
<li>
<Link to="/new-meetup">Add New Meetup</Link>
</li>
<li>
<Link to="/favorites">My Favorites</Link>
</li>
</ul>
</nav>
</header>
);
}
In this case, after ctrl+s, the dev. server displays the div, and the "All Meetups" list item with the link, but not the other two.
If i delete the ); part of the statement, then save it, and write back, then save it again, only then will the changes appear.
Any ideas?
Few problem which I can think of are as follow
Try to do hard refresh instead of deleting the ");"
Try to inspect the file from developer console. May be some css color ias same as background color.
Related
I am using the Next Js Script tag to embed a form from Convertkit into my project. The embed gets pulled in, and it works, I can subscribe and my email appears in the Convertkit Dashboard, everything works as expected.
However, the form does not render where I am trying to place it, which is in my about page, but rather, gets appended to the bottom of each screen, as it if was outside of the html document (outside of the parent div in my return statement, no background styling or anything takes effect). Sometimes its rendered at the top of the screen, over every other content.
You can check out the test project here: https://testfetchdata-uier.vercel.app/about
This is what my embed looks like:
<div className="flex flex-row space-x-4">
</div>
<>
<Script
async
data-uid="PROJECT_ID"
src="https://MYPROJECT.ck.page/PROJECT_ID/index.js"
></Script>
</>
</div>
</div>
Any ideas as to what might be happening?
Thanks a lot.
I am using SvelteKit for a website that is mainly server-side rendered pages. The client-side navigation on SvelteKit works beautifully and is super snappy. However, sometimes, when the backend server is called in the route load() function, the response is not instant and maybe several seconds because of the database long-tail latency.
What would be the best way to create a loading indicator that is only displayed if the loading time is not instant (sub 200ms)? I am aware of the generic navigating pattern, but I specifically hope to create a loading indicator that is not triggered unless the page load is not instant.
Sveltekit has a store variable called "navigating" which literally indicates if the client is in-between loading pages. From the Sveltekit docs:
navigating is a readable store. When navigating starts, its value is { from, to }, where from and to both mirror the page store value. When
navigating finishes, its value reverts to null.
Note, that if your page is pre-rendered, it should be "instant" and thus not show a loading indicator. If not, this "navigating" variable will be not null for as long as it takes for your content to be fetched and/or rendered. If you wanted to, you could make the "Spinner" component show nothing...until after 200ms (using a setTimout timer)...which it sounds like you do want.
Here's a sample implementation from a wrapper component I have used in the past (pardon the tailwindcss syntax...I copied and pasted it). You can customize this idea in __layout.svelte or wrap components or entire "pages" with this {#if $navigating} logic:
<script>
// USE THIS:
import { navigating } from '$app/stores'
// Example spinner/loading component is visible (when $navigating != null):
import Spinner from '$lib/design/Spinner.svelte'
...
</script>
<main class="py-4">
<div class="pagePaddingMain flex-col">
{#if title}
<h1 class="text-4xl text-center text-cText pb-4 sm:text-5xl">{title}</h1>
{/if}
{#if $navigating} <!-- LOOK HERE -->
<div class="m-8">
<Spinner />
<h1 class="ext-3xl text-center text-cText">Fetching {title}...</h1>
</div>
{:else}
<slot />
{/if}
</div>
</main>
That's it. Good luck!
I'm using NextJs. I would like to create a link in my header section. This link should take the user to TestimonialsSection on the same page by scrolling.
<Link href={"#TestimonialsSection"}>
<a className={styles.Designation}>Mentor</a>
</Link>
This is the code I tried, but it didn't work. The URL changes though. Thanks in advance
In vanilla HTML you'd do something like this
My first section
My second section
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
In NextJS you'd so something similar. Instead of using the anchor tag for linking, you'd use the Link components.
<Link href="#first-section">My first section</Link>
<Link href="#second-section">My second section</Link>
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
This would work just fine.
However, if you want your starting URL to be www.my-site.com/#second-section, you would need to set the Link component's scroll prop to false.
Ex:
...
<Link href="#second-section" scroll={false}>My second section</Link>
...
Make sure your sections/divs ie the target elements have the ID attribute set to them properly without the # and the corresponding
anchor links have the # prefixed to ID name
Here's the official NextJS documentation https://nextjs.org/docs/api-reference/next/link
Hope this resolves your issue.
If it's just a static string you should remove the braces as ЖнецЪ says above.
If you're making a reusable component where you need to specify the ID from a parent, use a template string and keep the braces.
<Link href={`#${props.id}`}>
<a className={styles.Designation}>Mentor</a>
</Link>
Try to use Link tag and in URL add #some-link and then in Link tag href with href='#some-link'
www.google.com/#some-link
<Link href='#some-link'>
// code section
</Link>
I'm new to Foundation. I setup a site previously using Foundation 4 and didn't have a problem with the top bar. But now, with Foundation 5, I'm not getting the post-breakpoint (I guess that's how I should describe it) dropdown functionality.
http://www.imdustindavis.com/test/foundation-5-topbar/
Am I missing something?
Thanks!
Modify the code in the title-area to
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- This line needed to display a touch icon on navbar for small screens -->
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
You don't need to do anything else to make it work. The javascript in the Foundation.topbar.js file will automatically create and populate the touch menu for small screens.
Looks to me like you need
<li class="toggle-topbar menu-icon">
<a href="">
<span>Menu</span>
</a>
</li>
Which isn't mentioned in the docs.
However I found your question trying to figure out how to get that to actually do anything. No luck yet.
I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.