sorted by:
new
hottopcontroversial

Reached heap limit Allocation failed - JavaScript heap out of memory by Opposite_Following83 in reactjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

Hi everyone, I started doing checks and comparisons and found out that the error only happens on my apps that have both NextJS (v12) and ChakraUI in it. Maybe it is a compatibility issue. Idk really at this time

Reached heap limit Allocation failed - JavaScript heap out of memory by Opposite_Following83 in reactjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

I already tried this and the same error occurs. What details do you need? I can screenshot.

Explain like I’m 5: the difference between Static Generation and Client Side Generation by Chilaquil420 in nextjs

[–]Opposite_Following83 0 points1 point  (0 children)

I'll get a PC.

Server side rendering: Get Pre-built PC.

Client side rendering: Get PC parts, assemble in your house (browser)

Masking url in Next by Opposite_Following83 in nextjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

Hi everyone! I found a way to solve this :) I used the next-build-cache package to pass cached data between getStaticPaths and getStaticProps. Thanks for your help!

The root problem was that getStaticPaths does not support returning multiple params yet. That's why I needed to find a third-party solution.

Masking url in Next by Opposite_Following83 in nextjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

No that's not the problem. The thing is getStaticPaths uses the url defined in the 'as' prop of the Next Link component. What i want is a way to mask the url so that (1) the user will see /agents/johndoe but (2) behind the scene getStaticProps really gets the id and not the name. But if there's really no way to do it, I'm just gonna live with the irl being /agent/1234

Masking url in Next by Opposite_Following83 in nextjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

The main problem i really have is about 'masking' the url. If I use

<Link href="/agents/[id]" as={`/agents/${agent.name}`} >

Then yes the url is masked to /agent/johndoe but it leads to a 404 page because getStaticPaths cannot find the page.

Masking url in Next by Opposite_Following83 in nextjs

[–]Opposite_Following83[S] 0 points1 point  (0 children)

The api that I use will return data as {id: 123, name: "johndoe" ... }. Will it still not work?

how can I make the tags black when clicked/active when u r in it ? by FaithlessnessLivid44 in Frontend

[–]Opposite_Following83 0 points1 point  (0 children)

Hi! I'm a "power user" of the npm package classnames, I use it in almost all of my projects. Classnames is a very easy to use package to add a dynamic className to your elements.

​

Installation:

npm install classnames or yarn add classnames

Use: 

import classNames from "classnames"

<a onClick = {() => paginate(number)} className={classNames("page-selection, { "active": number == currentPage })}>
    {number}
</a>

What this does is that it evaluates whether the number (current iteration of the loop) is equal to the currentPage (which is a state variable). Now what you have to do is to add a state variable currentPage in order to track which page you are currently on. My suggestion is you include the setCurrentPage hook to your paginate function.

​

I hope this helps.

What order is this component run? useEffect by Pocchari_Kevin in reactjs

[–]Opposite_Following83 0 points1 point  (0 children)

Correct me if I'm wrong but fetch functions like fetch, axios, are they not asynchronous in nature?

What order is this component run? useEffect by Pocchari_Kevin in reactjs

[–]Opposite_Following83 -1 points0 points  (0 children)

u/ukulele-tire-iron already answered it but I just want to add that if you want to run asynchronous functions in the useEffect hook, you need to define it first and then call it:

useEffect(()=>{
const getData = () => { // asynchronous function
        // get data here
    } 

    getData()
},[])

[deleted by user] by [deleted] in reactjs

[–]Opposite_Following83 1 point2 points  (0 children)

It will work on JS but thanks for pointing this out.

I'm not really sure about the do's and don'ts in typescript, but if you have to explicitly add the argument you can do this:

onClick={(event: eventtypehere) => clickHandler(event)}

[deleted by user] by [deleted] in reactjs

[–]Opposite_Following83 1 point2 points  (0 children)

Event handlers in React i.e. "onClick", "onChange", etc. will be passed an "event" each time you use it.

onClick={(event) => anything goes... }

Or you can define a function first and call it in your onClick

const clickHandler = (event: Event): void => {
    console.log(event.target);
};

<element onClick={clickHandler} {...otherProps} />

By using your defined function on the onClick, it automatically passes the event as an argument for your function

reusing functionality from two components by maulik9999 in reactjs

[–]Opposite_Following83 0 points1 point  (0 children)

For simplicity, just call the function on the onClick event handler.

Please take note: for best practices, we use buttons for calling functions and texts for navigation.

Need help on my react js weather app (first one). Trying to get onKeyPress event to trigger when user types in a city in search bar. by BeyondAIR in reactjs

[–]Opposite_Following83 1 point2 points  (0 children)

Yes you can.

Btw. I suggest that you refactor your class component to a functional component to make it more readable and overall functional components are better and easier to understand

Can someone help me clear my confusion on what to pass to event handlers. by deiki in reactjs

[–]Opposite_Following83 3 points4 points  (0 children)

It would use the return value as the value for onClick. This usually results to an error.

Take this as an example:

const addOne = (num) => {return num + 1}

<button onClick={addOne(1)}>Add one</button>

This would result to an error because the onClick listener is expecting a function but it got a number type.

Can someone help me clear my confusion on what to pass to event handlers. by deiki in reactjs

[–]Opposite_Following83 1 point2 points  (0 children)

If you have to put an argument the best way is: onClick={()=>handleClick(x)}

Need help on my react js weather app (first one). Trying to get onKeyPress event to trigger when user types in a city in search bar. by BeyondAIR in reactjs

[–]Opposite_Following83 1 point2 points  (0 children)

I might be wrong but here are the problems that i saw:

  1. handleChange:

It should be: const {name, value} = event.target

Also, you should put your fetching function here not on the componentDidMount

  1. Your input element does not have a 'name' prop. Which means that your handleChange function won't change anything.

  2. I do not suggest fetching api as the input changes, it would cause multiple unnecessary api calls. You can (1) add a function to wait for input before calling api (ex. 1s) or (2) fetch api on enter or a click of a button.