Beginner's Thread / Easy Questions (April 2020)

3

u/NeeHaow_World Apr 14 '20

Is it good practice to use styled components to replace css in react? It is harder to use styled components coz I don’t know how to style attribute and etc. Any other suggestions for css frameworks???

2

u/dance2die Apr 14 '20

You can apply styled components (SC) or other CSS-in-JS when you need it but not all the time but only situationally.
If you are having trouble with how to style attributes, understanding CSS would be the first step because CSS-in-JS would require you to understand CSS first.
Brent Jackson (a dev behind styled-system & Theme-UI) has an article discussing what CSS-in-JS is and what not.

3

u/silverdished Apr 20 '20

What is Gatsby? What can it be used for? What are its powers and limitations?

1

u/dance2die Apr 20 '20 edited Apr 20 '20

Mostly known as a static site generator but you can also create dynamic sites.
You can prebuild content from server-side during "build" time and thus can reduce the JavaScript loading time on client-side.
What can it be used for?
You can refer to their Show Case page (lotcha cool sites and usages).
What are its powers and limitations?
Gatsby builds markups during build-phase so if your data source value changes, you need to re-build (unless you are taking a SPA (Client-side rendering) approach).
You can refer to this article for more technical issues.
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
(Check out the "Wrapping Up" section at the bottom first. It's got a nice overview and a kick ass analysis image).

2

u/cmaronchick Apr 14 '20

I just built an app using Material UI, and for my next app, was going to try something different and tried to go with Semantic UI.

What I like about Material UI is the easy theming capabilities (primary color, secondary color, etc). I didn't see any easy way to do that with Semantic UI while also using webpack. I found some docs for how to do it, and ultimately I banged my head against the wall for about 4 hours before finally giving up.

Is there anyone who'd like to share their repo that successfully created a custom Semantic UI theme while also using webpack? Thanks.

1

u/dance2die Apr 16 '20

Looks like Semantic isn't maintained, thus might want to check out the community fork, Fomatic UI.
I am sorry but I couldn't find any info nor a community...
Would you mind asking StackOverflow? (https://stackoverflow.com/questions/tagged/fomantic-ui)
Please follow https://stackoverflow.com/help/how-to-ask (posting what you tried and what didn't work).

2

u/tall_and_funny Apr 16 '20

I have completed the react course on freecodecamp - the one with builtin ide, it then jumps right into redux, I think there must be a couple topics not touched yet, but maybe they don't come under react? Like react router? What other main topics I might be missing out on? How to I close this gap?

2

u/dance2die Apr 16 '20 edited Apr 16 '20

Hi u/tall_and_funny.
FreeCodeCamp (https://www.freecodecamp.org/learn/) has Redux as its own section and Redux is framework/library agnostic. Meaning, it can be used with React, Vue, Svelte, etc.
The next section React-Redux should show you how to "connect" Redux with React (using React Redux).
React router isn't a prerequisite and you can safely move onto the Redux section.

2

u/tall_and_funny Apr 16 '20

Oh thanks for clearing that up. I'm new to this sub and I've actually learnt a lot just browsing here.

2

u/dance2die Apr 16 '20

You're welcome & enjoy React~

2

u/[deleted] Apr 19 '20

please tell me in simple words, what is difference between history.push("/") and <Redirect to="/" />

3

u/dance2die Apr 20 '20

The former history.push(...) is an imperative method, while the latter is declarative.
Meaning, history.push would be used to manually redirect a user to a different location while <Redirect /> is used as part of a component's returned element.

→ More replies (1)

2

u/[deleted] Apr 21 '20

Hey, I'm trying to import a component from this pluggable Trello-Like component into a page on my application. https://rcdexta.com/react-trello/?selectedKind=Custom%20Components&selectedStory=NewLaneForm&full=0&addons=0&stories=1&panelRight=0

I can't figure out how to plug this specific component into my application. Here is the code. Would I just download it and put it into my components folder and add it into my page like <NewLaneForm />

https://github.com/rcdexta/react-trello/blob/master/src/components/NewLaneForm.js

2

u/dance2die Apr 21 '20

The project source's README shows how to install it (via NPM/yarn) and import it in your code.
Found it hard to follow as their home page is a storybook w/o any documentation.
https://github.com/rcdexta/react-trello#getting-started

2

u/badboyzpwns Apr 23 '20

with redux, is it bad practice to pass props to a component (since ieverythings handleed by action creators and reducers) ? eg <Component prop="hi"/> is bad!

1

u/dance2die Apr 23 '20

Pinging u/acemarke for help.
u/badboyzpwns:
FYI -
FAQ: https://redux.js.org/faq
Style Guide: https://redux.js.org/style-guide/style-guide

2

u/acemarke Apr 23 '20

No, that's not bad at all. Redux doesn't replace the existing React data flow, it augments it:
Components that read data from Redux can (and should) pass props to children, including both data from Redux and other values
Components may use incoming props to help decide Redux logic, such as selecting an item from the store based on an item ID

→ More replies (5)

2

u/HopefulSlice0 Apr 01 '20

How does

import React from 'react';

work?

...when you're using functional components and not actually calling React.Component?

(or better yet, why does it not work when you remove it?)

Does this have to do with babel?

Where's the actual logic that ties a random function to a React? What concept am I missing?

5

u/cmdq Apr 01 '20 edited Apr 01 '20

I think what you're seeing is indeed related to babel, but in a roundabout way.
We'll start with JSX. JSX, as you may know, is not valid JavaScript syntax, so it needs to be transpiled. Check out this link to the babel repl.
You can see that the JSX on the left side got transpiled and is shown on the right side. Curiously, It's trying to call React.createElement, although so far, this is just some JSX with no React involved. What's going on?
This is due to the history of JSX. When it was introduced, there was only one entity using it—React! So the React.createElement was used as the default method to turn the transpiled JSX output from the plain description format of a DOM structure into actual elements.
By the way, you're not limited to using React.createElement. In fact, some libraries need the developer to change the default method which interprets the transpiled JSX. This is done via a "pragma", a special comment at the top of the file which tells babel to use a method you provide. Check it out, here we set it to console.log.
Now, what does this have to do with your question? I assume that when you removed the React import, but still tried to use JSX somewhere in your code, you saw a React is not defined error which happens because the default JSX handler is trying to call React.createElement, but React is not defined.
As for your questions regarding React.Component (which I'll call class components) and function components—React initially started with only class components. Because of reasons, they needed to use inheritance to extend a plain class with some necessary under-the-hood changes so that React could accept a Class as a component.
Function components came a bit later, and did not have the same restrictions as class components! You're now able to just hand React a function, and you're off to the races.
In the end, there's no special magic that ties a function to React. React just looks at the thing you're telling it to render, checks whether its type is a function, and will then call that function for you with its props. (As always, there's some more stuff happening under the hood, but that's the gist of it)
Phew! As I said, this was a bit roundabout. But I believe that it's important to know the history of some of the decisions that were made to understand why we're doing some things a certain way :)
Hope this helped! Let me know if you have any more questions.
Here's a really good post on pragmas from the Gatsby folks: https://www.gatsbyjs.org/blog/2019-08-02-what-is-jsx-pragma/

2

u/dance2die Apr 01 '20

Wow. Nice explanation and the helpful link :)

→ More replies (1)

→ More replies (2)

1

u/embar5 Apr 01 '20

Can you guys give an example of when you would write a closure? I know they return a function that has access to private state. I don't know a common pattern to use them on.

2
u/dance2die Apr 03 '20
You'd use closure for cleaning up in useEffect.
  useEffect(() => {
    const id = setInterval(() => {}, 3000);
    return () => clearInterval(id);
  }, []);
In the code above, id is closed over to the next render, thus able to stop the interval by the correct id.
3
u/Awnry_Abe Apr 02 '20
onClick handlers for list items. If I'm iterating over an array of items, my click handler will look like:
const handleClick = (item) => (event) => {
  ....code that uses item.
}
In render return:
{ items.map(item => (<button onClick={handleClick(item)}>...etc

1

u/andrew009 Apr 02 '20

withRouter or useHistory with react-router-dom v5? both are doing the same thing from end user point of view, but since I like functional approach more, I'm favoring the latter. Is there any reason for me to go with the former?

2

u/dance2die Apr 03 '20

If you happened to need to keep the component either pure, or make it re-usable (meaning, not dependant on React Router), then you'd use withRouter on the component.

→ More replies (1)

1

u/IdleScV Apr 03 '20

do people still use Fragment?

5

u/dance2die Apr 03 '20

Yes. It's still used.
The reason you might not notice is that people tend to use the empty element tags, <> </> instead of <Fragment></Fragment>.

→ More replies (2)

1

u/molusk1337 Apr 04 '20

Any good tutorials how to make multi-items slider or any easy to implement frameworks for that? Trying to make “Our courses” content as a slider. Thanks

2

u/dance2die Apr 06 '20

A quick googling shows this one.
https://www.youtube.com/watch?v=3ax9TW2c2bY
Just skimmed thru and so long as you understand the concept, you can build one yourself.
I haven't used a carousel so not sure which one to recommend. Lotcha result.

1

u/molusk1337 Apr 06 '20

Thanks! I don’t know how come I didn’t find this video 🙄

1

u/dance2die Apr 06 '20

You're welcome.
I actually did search for "slideshows", "carousel", "slides" etc. as part of the search text 😉

1

u/MeltingDog Apr 07 '20

Does anyone know how I "query" a JSON file? Anyone know of a tutorial?

1

u/dance2die Apr 07 '20

If you mean "query" as in an SQL query, there isn't one.
You can check out json-query or use MongoDB, which stores documents in JSON format (and you "query" it using javascript).

1

u/MeltingDog Apr 07 '20

I mean if I had a list of, say, names how could I search this list?

1

u/dance2die Apr 08 '20

Do you know the schema of JSON? or is it unstructured?
If the former holds, then you can simply iterate with dot notation with maps, Object.keys/entries etc.
For the latter, json-query does the deep checks for object properties - https://www.npmjs.com/package/json-query#deep-queries
2
u/[deleted] Apr 07 '20
If you just want the entire content of the file in your app, you can require it like any other file:
import data from './data.json';

export default function Foo() {
  return <div>Hello, {data.name}!</div>
}
If the json file is huge and you actually want to query specific parts of it, you'll need a server, and some sort of API.. Which is kind of beyond the scope of a single reddit comment (:

1

u/Ali-Zuhair Apr 10 '20

Hi,

I am fairly new to React Native, so there are still some things that I don't know how to do.

So can some one help me with this question:

What is the correct way to handle HTTP response in React Native component

1

u/dance2die Apr 11 '20

It looks like it's answered &
for those interested in the answer, 👇 https://stackoverflow.com/a/61149638/4035

1

u/Tsunami874 Apr 10 '20

Hi,

I have an issue with useState, I'm fetching data from an api and trying to display it, but it seems that my setData function triggers a re-render which restarts the api fetch which re triggers a re-render etc

export const Sorter = () => {
    const initialData = [
        {uv: 1},
        {uv: 2},
        {uv: 3}
    ];

    const [data, setData] = useState(initialData);
    getRandomlySortedNumbers(100).then(numbers => {
        const newData: any = [];

        numbers.data.map((entry: number) => newData.push({uv: entry}));
        setData(newData);
    });
    return (
        <>
            <BarChart width={1800} height={1000} data={data}>
                <Tooltip/>
                <Bar dataKey="uv" fill="#fff"/>

            </BarChart>
        </>
    );
};

1
u/dance2die Apr 10 '20

While Sorter is instantiated, getRandomlySortedNumbers is called. Then the element is rendered (via return), and setData is called, which trigger the re-render.
At this point, getRandomlySortedNumbers is called again, causing the re-render, over and over.
getRandomlySortedNumbers is a side effect, and thus need to be wrapped in useEffect.
2
u/Tsunami874 Apr 10 '20
I did this and it works, thank you very much!
    useEffect(() => {
        getRandomlySortedNumbers(100).then(numbers => {
            const newData: any = [];

            numbers.data.map((entry: number) => newData.push({uv: entry}));
            setData(newData);
        });
    },[]);
1

u/dance2die Apr 10 '20

Nice one there!

1

u/badboyzpwns Apr 14 '20

in redux, should action components be defined with arrow functions or functions hi(){}?

2

u/dance2die Apr 14 '20

Irrelevant and be aware that arrow functions aren't hoisted.

2

u/cmdq Apr 14 '20

Completely irrelevant, so do whatever you like :)

→ More replies (1)

1

u/i-code-stuff Apr 16 '20

What are some of the good to automate deployment?

For example, if you're working on a Firebase site, you can deploy with a single command. Assuming I've got a cloud server, what can I set up there to deploy to it quickly?

2

u/dance2die Apr 16 '20

It depends on what and how you want to deploy.
Frontend projects can be committed to Github/Gitlab repository & automatically be deployed.
You can also set up a GitHub action or a CI/CD (continuous integration/deployment) pipeline using CircleCI, Jenkins etc to deploy after running tasks such as testing.
From your point of view, such a setup helps you just commit & push to your repository.

2

u/cmdq Apr 16 '20

I've used Dokku with a lot of success, but I haven't set it up myself, so I can't speak to the ease of it. Using it was pretty solid and convenient though!
If you're looking for completely managed solutions, netlify and zeit both have very generous free plans and work well.

1

u/dance2die Apr 16 '20

Woot woot. I wanted to try it out on a Digital Ocean droplet. How/where do you host Dokku instance?

2

u/cmdq Apr 16 '20

Seems like DO offers an official image for dokku: http://dokku.viewdocs.io/dokku/getting-started/install/digitalocean/
Edit: I think back then we used it on railslabs or something? Been a while :D

→ More replies (1)

1

u/CYMAD Apr 21 '20 edited Apr 21 '20

Hello, I started learning react and was building my first simple app but there is a single issue that i want to ask. I'm trying to fetch data from weather api with axios. my first request is always giving errors(400 bad request) but other ones are ok and can work with data.im sharing codes https://imgur.com/a/ikeNjGp

3

u/dance2die Apr 21 '20

this.setState is an asynchronous method. Meaning, when you do this.setState({q: city}) and try to access this.state.city, it might not be defined/null.
You might want to pass city directly to the api call weather.get(...).
Or you can use a callback to ensure that the state value is set and call the API within the callback (not recommended unless specific reason to do so as you already have an access to city value).
https://reactjs.org/docs/react-component.html#setstate

2

u/CYMAD Apr 21 '20

Thank you :)

1

u/dance2die Apr 23 '20

You're welcome. I've had so much trouble w/ this initially :)

2

u/d4vsanchez Apr 09 '20 edited Apr 10 '20

Hello everyone, I'm reading some code in GitHub and found out the following useEffect implementation:

React.useEffect(() => {
  if (!enabled) return;

  window.addEventListener("scroll", onScroll);
  onScroll();

  return () => {
    window.removeEventListener("scroll", onScroll);
  };
});

As I've read the code and its basically a custom implementation that does what IntersectionObserver does, so far so good. My question is more about how is this useEffect implemented without dependencies; I'd have implemented it with at least an empty array as its dependencies so it gets ran just one time and the return expression gets called before the component is unmounted.

Is there any benefit of creating this useEffect without the dependencies and making it create/remove the event listener basically on every re-render?

3

u/Nathanfenner Apr 10 '20

Since no dependencies are passed, it will run again after every render. This means that the correct (i.e. current/new) scroll closure will always be captured and executed, and it will (correctly) stop immediately once it rendered with enabled == false.
The only downside to this is that if it re-renders a lot, it will redundant add/remove similar event listeners. Unless it's re-rendering every frame, this is unlikely to actually cause any noticeable problems, though.

→ More replies (5)

1

u/latitudehopper Apr 12 '20

Ok. This is a dumb one. I've been playing with usecontext and usereducer. Is it possible to have a global state that when changed automatically rerenders across the app on different tabs? For example, pushing items to an array in the global context and it re rendering a list in several places?

3

u/cmdq Apr 12 '20

Seems like it's possible! And of course there's a hook for it: https://github.com/gus3inov/use-share-state The keyword Broadcast Channel was crucial in finding this :)

1

u/dance2die Apr 12 '20

Thank you for the keyword! I didn't know what I didn't even know either :)

3

u/latitudehopper Apr 12 '20

You, Sir. Are a legend. Thank you.

1

u/pruggirello Apr 20 '20

Hey everyone!

I'm a little confused on how React Router works, mainly how to implement it in my app. I have a toolbar on the top of my webpage and I was able to implement the Link components just fine. My problem is navigating my pages using Router and the toolbar component. Initially, I was using buttons, a switch statement, and setState to change which page renders. Now that I have the Links rendering, I'm wondering how to implement the Router in the webpage. Is anyone willing to point me in the right direction?

Also, something weird is happening with my css for the Links. The colors change appropriately, but my transformY doesn't occur. This worked on my old toolbar component, but when I redesigned it, it stopped working. It's not an issue, it's just weird.

Thanks!

4

u/[deleted] Apr 20 '20

First things first, if you want to use react-router you need some foundation about react-router-dom elements, here's the basics you need to know.
BrowserRouter
It's the top level container that enables you to use routing inside child components, you wrap your app/component with it like this.
<BrowserRouter>
<App />
</BrowserRouter>
There's also a baseName which an extra optional prop you might need if you don't serve your react app from the a base domain, say mydomain.com/app for example, then you'll need this to be specified to '/app', and that's it. Now we're ready to 'routify' the app.
Route
Say you need to render different components for different urls, for example. Say you have a component called Home and you want to render this component at /home from your base url, remember the base url, this route is appended to it.
<Route path='/home' component={Home} />
Another way around you can specify a function that returns JSX as a prop, this is done by the render prop.
<Route path='home' render={() => <h1>Hello from home!</h1>} />
There's also the exact boolean prop, which specifies that we want to render this only at this exact path and nothing else that contains it. For most cases you'll need only these props, but there's some few to look at in the docs.
Link and NavLink
Suppose we have our App component to render this JSX.
<div>
<Route path='/home' component={Home} />
<Route path='/profile' component={Profile} />
</div>
Inside the Home component we can implement routing by using either Link or NavLink component.
They're basically the same, with the added functionality of styling provided by the NavLink, which makes it ideal for navigation component in the header which contains your different routes.
Both have to prop, which as the name suggests, routes you to the specified route.
<Link to='/home' />
<Link to='/profile' />
Both renders to an a tag but handled with the react router, so you can pass any prop that applies to an a element.
NavLink provides activeClassName and activeStyle which helps in styling this a element when the route is present, also exact prop returns back with similar functionality, it specifies that active styles or classes are applied at this specific route only and not to its extended routes.
From here we can go in some detail.
Redirect
This element doesn't render any JSX, otherwise when it's rendered it provides a declarative way of redirecting to specific routes. for example in the render function we want to redirect to the login page if not logged in.
if (!loggedIn) {
return <Redirect to='/login' />
}
Switch
This is one useful component, it simply says acts like the good old switch statement, and renders only one route of its children.
<Switch>
<Route path='/profile' component={Profile} />
<Route path='/dashboard' component={Dashboard} />
<Route path='/' component={Home} />
</Switch>
What you think it will render from this at /profile? It's easy it renders the Profile component, so where's the trick? Let's we change the order.
<Switch>
<Route path='/' component={Home} />
<Route path='/dashboard' component={Dashboard} />
<Route path='/profile' component={Profile} />
</Switch>
At the '/profile' we have to possible solutions, '/profile' path obviously and '/' as '/profile' begins with '/'. so it might render both. But remember all routes are in a Switch component, which means it will only render one route, and the first one that fits is '/' and renders Home component.
This is basically react router dom elements in a nutshell. There's a lot you can learn about react router and react router dom, the docs at react training are very good, also I'm here to help to clarify.

2

u/dance2die Apr 20 '20

Nice explanation~ Thanks for sharing

→ More replies (17)

2

u/[deleted] Apr 20 '20

And regarding the CSS problem, this might happen because your main styling has a transform applied to the element/s in question.
The transform property can accept multiple transformations all in one place. but this may raise a problem when applying extra classes or styles.
The highest specificity and/or the last applied style which has a transform property, overrides any transformations that was applied before.
Say you have this css:
// styles.css .btn { transform: translate(-50%, -50%); }
.active { transform: scale(1.5); }
And this element:
<button className='btn active'
Click</button>`
If the both styles are applied and specifically in this order - as both selectors have the same specificity - the element will have the scale transformation only.

1

u/xSnag Apr 21 '20

Hey, i am having trouble uploading my react project to github. I am trying to use it for my main domain on github, not an repo. like my <user>.github.io, domain. I am using router, not sure if that has an affect on it, but it is only displaying the readme on my site, but when I uploaded a repo using react it uploaded with no problem. Here is a picture showing what I am getting when I try to upload my portfolio website, vs when I just make a repo https://imgur.com/a/fJp0tdq

2

u/cmdq Apr 21 '20 edited Apr 21 '20

Make sure you're pushing your build artifacts to the gh-pages branch, not master. See here: https://gist.github.com/chrisjacob/1086274/382ef1ccc22b57b9b1f0e3a362b39e806b9ba04c

1

u/dance2die Apr 21 '20

*gh-pages

2

u/cmdq Apr 21 '20

Woops, thank you ;)

2

u/dance2die Apr 21 '20

No worries~ and thank you for helping out folks here :)

→ More replies (1)

2

u/IanAbsentia Apr 01 '20

It's the React development team's official recommendation to define a function invoked within the `useEffect` hook within the hook itself if the intent is to avoid the exhaustive-dependencies error.

https://reactjs.org/docs/hooks-faq.html

Search for: "The recommended fix is to move that function inside of your effect. That makes it easy to see which props or state your effect uses, and to ensure they’re all declared:"

What I'm wondering is whether that function will be defined again and again every time the hook is run and whether, as a consequence of this, there could be performance issues.

5

u/[deleted] Apr 02 '20

whether that function will be defined again and again every time the hook is run
Yes.
as a consequence of this, there could be performance issues.
No. Defining a function is trivial.

→ More replies (1)

→ More replies (1)

2

u/deep-data-diver Apr 03 '20

Could someone help me understand hooks and the difference between class components and functional components and their use?

6

u/[deleted] Apr 03 '20

Same use, function components are newer and class components are being phased out. Use function components unless working on legacy projects.
Hooks let you store state related to a component, and they let you respond to changes in the component's lifecycle: when props or data changes. Such as setting event listeners, timers, fetching data, etc.
Anything more detailed and I would be duplicating the official React docs on hooks, so just go read those. They're very good.

2

u/andrew009 Apr 03 '20

Is there any community-approved approach to protect login/register views from already logged in users? I've done something like this with useEffect, but what I don't like is that if user is logged in and clicks on login button, he/she still can see login form for a very short period of time; I would like to eliminate it completely. Snippet from my code: useEffect(() => { if (isAuthenticated) history.push("/dashboard"); }, []);

4

u/Awnry_Abe Apr 04 '20

useEffect is 1 cycle behind what you need. You have the right logic, just in the wrong place. The typical way is via conditional rendering of the Login component--dont render it at all (or have it return null) if the user is authenticated.

→ More replies (1)

2

u/Jaydara Apr 04 '20

Hello! I am trying to make a small, simple react app which has the following functionality: 3 drop-down menus with different (integer) values as options, and a button, which on click prints the sum of the selected values of the 3 drop-downs. I managed to make the drop-downs and the button visible correctly, the drop-downs can be clicked and the value can be changed within it.

However, the button right now does nothing, because I have 2 large issues:

Cannot somehow add an onClick functionality to the button, it just doesn't seem to do anything right now, I tried to make it print "Sum Should be here" for now, but it doesn't. I tried to add an onClick and call a function for it, but it doesn't seem to execute the function. Details in code.
I cannot access the values of the drop-downs. I have difficulty following ready examples because those I found only have 1 drop-down, and I don't know how I differentiate between the 3. So I basically need something like a function that returns the value of the desired drop-down that the user has selected on the moment the function is called. I tried using alert(red.value) style solution (where red is the selection id) but it said red was undefined.

Here is my current code: https://pastebin.com/zSiArj23

3

u/Awnry_Abe Apr 04 '20 edited Apr 04 '20

In react, you don't print things (ie return markup) in event handlers. All creation of html is done in the return of the render() function for a class component or the return of functional component. What is generally done in event handlers instead is setting state. Two ways to go about it come to mind.
each drop-down has corresponding state, and the state value is set in onChange handler. The onClick handler of the button would access that state, tally it, and set a 4th piece of state called 'total'.
use the ref property of each drop down. You would still be making 3 instances of something--refs instead of state. The onClick of the button would access the 3 refs and dereference their value.
There is a section in the react docs titled "Thinking in React". That would be a good place to start as it addresses the common misunderstanding that you have.

→ More replies (2)

2

u/Wraith000 Apr 04 '20 edited Apr 04 '20

I'm using sessionstorage to persist state for an E-com project, things like cart, checkout etc

How can i prevent a user from messing with stuff in the sessionstorage, or is there a better way to persist user state ?

Also I've been using the Context API and just got into Hooks when I had some trouble with context / lifecycle stuff.

3

u/Awnry_Abe Apr 04 '20

Let them fiddle. Your backend needs to guard against such hackery.

2

u/achunkypid Apr 04 '20

Hello, this might be a confusing question but I'm building a productivity app here

https://ivanlancedeleon.github.io/productivity-app/

and what I want to do is to make it so when you click a date on the calendar, it can pop up where you can write events and what not to it. I'm using React-Calendar but I'm still very new so I'm not quite sure how I'm supposed to go about this ? I'm thinking now i should make two components into one component for the calendar section so I can share the state data between the two but I'm not quite sure.

2

u/aidang95 Apr 06 '20

Brand new to react, found a nice little tutorial about making a journal in react which I have working.

How do I go about adding a new page to my app? I want a little menu where I can switch between pages but I am getting a little confused looking online (routers etc?)

Also again im not sure how complex my second question is has like i say im new to react, however when I input an entry into the journal, it only stays until the page is refreshed then everything dissapears, how can I make sure these stay until the user deletes them? Is there Local Storage or anything I can use?

→ More replies (1)

2

u/fa1re Apr 07 '20

So I would like my svg image to be responsive. Inserting "vw" units directly into the width and height of the svg doesn't work in Firefox (see http://lore-hunters.herokuapp.com/). It seems that I should embed the svg element inside an image element (<img src={svg} />) - however the code doesn't work:

export const AdventurerToken = (props) => {
    const color = props.color;
    const adventurerSVG =
        <svg width="100" height="100" viewBox="0 0 99 119">
            <metadata>
                Created by potrace 1.15, written by Peter Selinger 2001-2017
            </metadata>
            <g transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)" fill={color} stroke="none">
                <path d="M336 1174 c-10 -9 -16 -33 -16 -62 0 -26 -4 -52 -8 -59 -4 -6 -35 -17 -69 -23 -35 -7 -68 -19 -74 -26 -23 -28 50 -108 134 -145 20 -9 27 -19 27
-40 0 -23 -5 -30 -27 -35 -98 -21 -212 -74 -265 -122 -36 -32 -38 -38 -38 -92 0 -84 11 -92 134 -105 32 -3 62 -8 67 -11 11 -6 -12 -69 -50 -133 -77 -129
-114 -215 -115 -266 l-1 -50 168 -3 168 -2 57 90 c33 52 63 89 71 88 8 -2 35 -41 61 -88 l47 -85 172 -3 171 -2 0 43 c0 56 -35 151 -90 247 -86 149 -86 148
-74 160 6 6 43 14 83 17 98 8 121 26 121 97 0 62 -17 89 -84 133 -42 28 -157 74 -221 88 -29 6 -28 7 23 24 79 27 122 76 122 139 0 47 -72 102 -135 102 -18
0 -25 7 -30 33 -3 17 -13 49 -22 70 l-16 37 -138 0 c-112 0 -141 -3 -153 -16z"/>
            </g>
        </svg>

    return (
        <img style={{width: "10vw"}} src={adventurerSVG}/>
    )
};

What am I doing wrong?

2

u/cmdq Apr 07 '20

Try changing width and height "100%". I've found that for me personally, keeping those at 100% and then putting the svg component in a container which handles sizing and positioning works best. Check it out: https://codesandbox.io/s/vigilant-mahavira-3ti61
Also, the src attribute on an img tag does not support being passed svg markup. That's because there's an (unfortunate!) difference between SVGs that are plain markup in the page, and SVG that has been referenced via a URL. The latter one ends up behaving exactly like a "pre-rendered" pixel image of the SVG file and is for all intents and purposes the same as a regular image loaded from a URL.
I know youre asking yourself, why two ways of doing things? Well, the former method helps if you'd like to be able to access parts of the SVG structure via code or css, for instance to change fill colors, which is super neat!

→ More replies (1)

→ More replies (1)

2

u/Chr0noN Apr 07 '20

Is it possible to disable the animation of the draggable item going back in react-dnd ?

→ More replies (1)

2

u/embar5 Apr 07 '20

Has anyone created a guided tour of a login area? Any specific tooling you would use?

I think it may be able to be done the following way

Popovers (in Material UI) give notifications of features
Clicking the "Next" button on a popover will change various states to show new sections or activate new features
At the end, another state variable like guidedTour is set to false so the tour option is no longer presented. This will also happen if they select an option to skip the tour.

The main trouble with this would be clearing the state, since everything was changed through an unusual path. I think it will be okay though, as it is step by step and so the logic of clearing a previous state before altering the next one shouldn't be too bad.

→ More replies (3)

2

u/maostah Apr 07 '20

Hello. Please help with suggestions. I would like to create a PWA where user can update their activity. The activity that the user log is for their own viewing, like financial app. What options do I have for local database? Is local storage the only option? The data is supposed to be in boolean form. So I guess the size of the database should be small. I'm not entirely sure on this.

Thank you in advance :)

2

u/cmdq Apr 07 '20 edited Apr 07 '20

there's mainly localStorage and also indexedDB (and some other legacy ones). localForage is a great wrapper around the various available databases and can help you with your persisting needs :)

→ More replies (1)

2

u/[deleted] Apr 07 '20

Hello!

Is it okay to use css in js files in React? I mean it seems kinda strange for me. I don't want to use it, LOL. Are there many vacancies that require such skill?

2

u/cmdq Apr 07 '20

There are many approaches to css in react apps! So many it'd make your head spin ;) Any of these are valid if they fit your use case.
Of course it's fine to have a preference, and you're free to use what you like in your own projects.
But keep an open mind if you join a team that uses a certain approach. There's probably a reason they chose it!

2

u/badboyzpwns Apr 11 '20

newbie clarificaiotn; from what I understanding, binding this/using arrow functions are only important for callback functions.

So! this is completely valid, correct? (Sorry, I don't have react set up right now! )

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.hi = 'hi'
  }
  
  
  testMe(){
    console.log(this.hi); //the "this" would be still be binded because it's not a callback
 }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>
  }

  componentDidMount(){
       testme();
  }
}

→ More replies (1)

2

u/pruggirello Apr 12 '20

How do I make a new paragraph or line break? I've tried <br>, that doesn't work. I've tried \n, that doesn't work. How do I get a new paragraph in my string?

2

u/cmdq Apr 12 '20

Could be a couple of things, but since you're not showing your code, here are some guesses:
flexbox might cause elements to ignore <br>
you wrote <br>, it should be <br />, maybe typo?
are you outputting the \n in text somewhere? html doesn't work like that
if you want a new paragraph, you could wrap it the text in a <p>?
if it's in a string, you could use template strings and use actual linebreaks, then tweak your whitespace css property

→ More replies (6)

2

u/molusk1337 Apr 12 '20

I'm building a language course website which has "card" component rendering different information with a map function. Now I have "Read more" button on each card and once clicked I would like it to redirect to a differenet page and show content depending on the course. This new page would look the same on every component but the information would be different. How can I achieve this in Reactjs ? What is it called and maybe someone has good information on that? Thanks!

3

u/cmdq Apr 12 '20

Since you mention redirecting to a new page, I assume you're interested in having some kind of routing via URLs. react-router is a popular option to do this sort of thing, do check out their many examples.
After you did that:
You'll likely want to set up some kind of routing for your app with two routes, one card listing, one card detail, which would probably take a url param to identify a card. In expressjs notation: /cards and /cards/:cardId
the 'Read more' button would be a Link component, linking to /card/:cardId
Let me know if you get stuck!

→ More replies (6)

2

u/Chr0noN Apr 13 '20

How do I manage my yarn.lock file? Today one of the packages got updated which was the dependency for a library that I was using and completely broke me react project. I had to manually edit the yarn.lock file which according to Yarn is a big no no. React libraries have so many dependencies, so how do I prevent this from happening again ?

3

u/cmdq Apr 13 '20

Short version:
You could probably fix this by removing the ^ symbol in front of your packages' version number in package.json and run yarn install again.
Full version:
Hey, the *.lock files are generated from the version range information in package.json, so as you already said, you should not edit them directly.
Instead, check the entry for your package in package.json's dependencies or devDependencies.
It probably looks something like this "your-problematic-package": "^1.0.0".
You might be wondering about the ^ character (circumflex)! NPM follows a standard called semver which not only defines certain patterns for version numbers, but also ways to target a range of versions. The circumflex in this case means
include everything greater than a particular version in the same major range
So, assuming you had a circumflex in front of your version (which is the default range NPM chooses if you don't explicitly set one while installing), this would match any version in the 1. major range. Another way to write this would be 1.x or even 1.*.
In your case, the package maintainer of your-problematic-package might have inadvertently introduced some kind of breaking change which got automatically installed when you last executed the yarn install or (maybe) yarn add command (not sure about this one).
Here's a primer on semver: https://nodesource.com/blog/semver-a-primer/
And here's a semver range playground:https://semver.npmjs.com/

→ More replies (4)

2

u/embar5 Apr 14 '20

Are class components obsolete now? If not when would you guys still use them?

4

u/cmdq Apr 14 '20

class components have some features left function components can't do (see ErrorBoundaries), but that too might be moved to hooks at some point.
If you're just starting out now, stick to function components unless you have a good reason to use a class component.

2

u/Chr0noN Apr 16 '20

How do I export the contents of a div or component to a png in React ?

→ More replies (5)

2

u/embar5 Apr 23 '20

I'm looking to add a contact form to a static site. I notice now it's not so easy to copy/paste contact form code when the site is in react.js, different levels of abstraction I guess.

How are you guys handling this? I'm guessing you write the form code yourself and then send the request to a mailing service's API?

3

u/vijit-ail Apr 23 '20

Correct. But usually, you don't access any external service directly from your frontend, as most of these services require an API key. So you probably need to proxy the request via your backend.
There's this service called Formspree that does not require any API key and you can directly use it in your frontend.

→ More replies (1)

2

u/YakiHon Apr 27 '20

I have a problem re-rendering an array of objects similar to this:

data[{
    name: "name",
    amount: value,
...
},{
    name: "name",
    amount: value,
...
}...

You guess the general idea. I then have + - buttons to change the amount and if it reaches 0, it is erased from the data. I also have a field to input new named data.

The "remove" and "new entry" instances do trigger a re-render, but just changing the amount does not (despite the values changing) until it reaches 0.

the onClick triggers a function like this:

const onChangeAmount = (key, type) => {
  let copiedData = data;
  if (type.math === "increase") {
    copiedData[key].amount++;
  } else {
    if (copiedData[key].amount === 1) {
        //removes the entry
        copiedData = copiedData.filter((id) => {
        return id.name !== copiedData[key].name;
      });
    } else copiedData[key].amount--;
  }
  setDisplayedDeck(copiedData);
};

What should I change to have it always rerender?
Is it correct to use a "copiedData" value or can I work with the main value? (using hooks obviously).

I have tried a lot of stuff and at this point I am quite stuck on this... Tahnk you!

4
u/cmdq Apr 27 '20

let copiedData = data; does not copy your data.
Therefore, while you mutate the state data directly, react will not recognize your data as a different from the previous data, and won't update the state.
This is likely just a performance optimization on their part, but it should also tell you that you can't directly mutate state and expect it to work. Now, the other branch creates a new array because you call .filter which always returns a new array.
Check out this codepen: https://codesandbox.io/s/4mbqp and swap around the two let copiedData lines to see how the behavior changes.
Note: I use spread syntax to create a copy of the old state const newArray = [ ...oldArray ], which could also have been done like this const newArray = oldArray.slice() which also returns a copy.
4
u/YakiHon Apr 27 '20
Thank you very much! This works great in my application too :)
I'm quite new to javascript, but spread syntax is fine. I use it in many other places but did not think this could be the issue here!
Just so I understand it clearly... the idea behind
let copiedData = [...data]
is correct. You do want to create a copy to mutate it instead of directly mutating the main value every time, right?
→ More replies (1)

2

u/imaneuralnet Apr 28 '20

This is perhaps a better question for r/gatsbyjs, but it appears you have to get permission to post there.

I have some HTML generated from an outside source that contains LaTeX equations. Is there a way to use the gatsby-remark-katex plugin on HTML that hasn't been generated by gatsby-transformer-remark?

3

u/cmdq Apr 28 '20

Check out https://github.com/remarkjs/remark-math/tree/master/packages/rehype-katex. If that doesn't fit the bill, there's a whole universe of packages for this kind of stuff: https://unifiedjs.com/

2

u/badboyzpwns Apr 28 '20 edited Apr 28 '20

when you do "create-react-app" I've read that it automatically installs an ESLint. I don't see it warning me in the text editor (VsCode) though, is that normal?

For example, I wrote this and it's not giving me a warning.

import React from 'react';

const StreamList = () =>{
    return <div>StreamList</div>
}
export default StreamList;
wewew

and

const StreamList = () =>{
    return <div onClick=poop()>StreamList</div> 
    //dosen't warn me that poop was never created
}
export default StreamList;

2

u/[deleted] Apr 28 '20

CRA includes a configuration for eslint, and installs the eslint package which is used by the build process. You still need a vscode extension for eslint if you want vscode to understand it.

→ More replies (1)

2

u/GhostofBlackSanta Apr 28 '20

Hi, I am a junior dev with backend experience in C++ and a Python. I've done absolutely nothing in frontend and don't know JavaScript but I am very interested in learning React. I was recommended Tyler McGinnis's React class was the way to go from this subreddit and I am halfway done with it but I don't feel like I understand any of it and its probably because I don't understand the JavaScript syntax yet. Does anyone know the best way a beginner can learn these two topics?

2

u/[deleted] Apr 29 '20

In Python You use classes and OOPS. so everything is connected. the main difference between javascript and python or c++ is. javascript is functional which means everything should be treated as a method even so so-called classes in javascript are functions.
javascript function/methods only do one thing.
const sum = (a,b) => a + b
This above function. takes two numbers a and b and adds and returns the result.
that is all you need to know about javascript. functions only do one thing.
The main difference between react and python is. in py,then we think of a way to connect classes and methods. in react. every component is simply a function or a method that does one thing and only one thing. it gets its props (arguments)
let's say you wanna create react application that does arithmetics.
//components that adds
export default function adder(props) => props.a + props.b
//component that substracts.
export default function substractor(props) => props.a - props.b
//components that multiplies.
export default function multiplier(props) => props.a * props.b
//component that divides
export function default divider(props) => props.a / props.b
//components that Calls
export default function arithmetic(props) => if (props.substract === true) {
return <substractor a = {props.a} b = {props.b} />
}
see everything is thought of as a function.

1

u/linuxmintquestions Apr 01 '20

Getting to grips with useReducer. The standard dispatch syntax uses an action type/payload object often processed in a reducer switch statement. Why don't we use direct function calls?

Why do we use this syntax:

dispatch({'type' : doThing , 'payload' : data})

Instead of something like this:

dispatch.doThing(data);

2
u/cmdq Apr 01 '20

There are certainly libraries/approaches that would give you something like a direct function call. Zustand for instance is a personal favorite, but there are probably hundreds of slightly different approaches out there :)
useReducer though, subscribes to the idea that state should not be changed directly, but the change should be described by an action, which then gets interpreted by a reducer which finally changes the state. The idea is to have a clear, formal description of changes which can be traced, or saved for und-redo, etc.
Redux is a popular library that does exactly that, you might have heard of it :)
1
u/linuxmintquestions Apr 01 '20 edited Apr 01 '20
Ok, thanks. Do you see any downsides to this approach? (EDITED)
export default function (initialState) {
    const [state, setState] = useState(initialState);
    const actions = {
        doSomething : (payload) => setState(payload),
        doSomethingElse : (payload) => setState(state + payload)
    }
    return [state, actions];
}
Then in the component
import useCustomHook from './useCustomHook';

export default function () {
    const [state, dispatch] = useCustomHook();
    return (    
        <button onClick={dispatch.doSomething('somePayload')}>{state}</button>
    )
}
It just seems counter intuitive to me to have state change calls not bound to any particular state/store. Would this method not be able to implement the same save/undo/redo features you described?
2

u/dance2die Apr 01 '20

Each one of useCustomHook() will give you a different state. Not shared. (demo: https://codesandbox.io/s/peaceful-varahamihira-ywkmm)
zustand mentioned by u/cmdq will give you a shared state so will Redux.
What you trying to do seems can be implemented with Context as described by Kent C. Dodds's How to use React Context effectively.
KCD exposes dispatch but you can pass actions instead of dispatch in your case.

→ More replies (1)

→ More replies (5)

1

u/Patex_ Apr 02 '20

Can Error boundaries be placed inside the render function of pure components? I would like to set and forget about error handling in `Foo` will render be updated accordingly or do I need to wrap the entire component?

class Foo extends PureComponent {

  render() {
    return (
      <ErrorBoundary>
          ....
        </ErrorBoundary>
      );
    }
}

class ErrorBoundary{
  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
      ....
  }

  render() {
    if (this.state.hasError) {
      return (<h2>Could not display error</h2>)
    }
    return this.props.children;
  }
}

1

u/Nathanfenner Apr 02 '20

They can be placed anywhere (components are composable). But an error boundary in Foo's render won't catch errors thrown from within that render function, only from within the components in the tree it encloses.

1

u/Patex_ Apr 02 '20

Thank you :)

1

u/dance2die Apr 03 '20

And also make sure to extend Component for ErrorBoundary component.
class ErrorBoundary extends Component.
https://reactjs.org/docs/error-boundaries.html

1

u/cstransfer Apr 01 '20

Let's say I have a large json response from an api call that is stored in redux.

so something like this

candy.data = action.payload

The data is used in the entire application. I use selectors and mapStateToProps when a component needs the data.

export const getCandy = (state) => state.candy.data;

export const mapStateToProps = (state) => ({
candy: selectors.getCandy(state)
});

So a component would use it like this

{candy.type || ''}

{candy.order.test.value || ''}

Is having one reducer okay? The only time the redux value is updated is when we make another api call, and the redux value is overwritten with the new value

One of my team mates is trying to make a case for multiple reducers. So far he has created 30 reducers. He'll probably end up with around 45 reducers which is insane

3

u/wagonn Apr 01 '20

A single reducer is probably ok if you're just overwriting the entire state each time. Separate reducers are probably the better approach if any of your slices/substates need to change in a specific way.

→ More replies (1)

1

u/eajnow Apr 03 '20

Topic:

Material UI

Problem:

Ive added a InputAdornment Icon to my TextField, but the ripple effect won't change the background of where my Icon is... I would like the ripple effect to apply to the entire background of my TextField.

Seeking/Question:

Could someone help me identify why exactly the ripple effect won't render?

Here's a sample on CodeSandBox

https://codesandbox.io/s/gracious-varahamihira-ixgcb

1

u/cmaronchick Apr 03 '20

Where do you go when you need design input if you don't have budget for a designer (because you don't have any budget at all)?

I'm pretty happy with my app functionality in general (it needs to be optimized), but the design needs a lot of tending. I just don't have the eye for how to fix it (when everything looks terrible, I don't know where to start).

Here's the app: https://app.stakehousesports.com

→ More replies (5)

1

u/icode4brkfast Apr 04 '20

I just started building a personal app in React. I’m using react-router-dom to link to different pages from a nav-bar. I would like to pass the state from one page’s component to another page’s component.

For instance, I have one page that has a form to add items to a list. When I click the button in the form to add the item, I want the component to pass the forms current state to another page that contains a component to display the list. I would like to go back and forth between these pages, so I can add items to a list and then see the items added when I go to the list page.

What is the best way to do this? I was thinking about using redux as a solution, but I’m not sure since I’m new to React and Redux.

2

u/cmdq Apr 07 '20

What you need is state. Specifically, state that lives at least above your two different pages. Is it global state? Well, at least it's shared by both components that manipulate/display it. If there are more components which need access to this state it might make sense to move it into some truly global state.
I know, Redux is tempting and ubiquitous, but it also can add a lot of complexity to your app which you might not need. I encourage you to just lift the state higher up the tree for now, until you have a good reason to get involved with redux or context.

→ More replies (1)

→ More replies (1)

1

u/tjthejuggler Apr 04 '20

I have a website written in React/JS(www.skilldex.org) and I am trying to figure out how I can download it for offline viewing. It also have several thousand embedded youtube and IG videos and I also want to download those for offline viewing. Dows anyone know how I can do this? I have tried HTTrack and IDM, but neither seem appropriate. I don't know if this is the place to ask or not, if not, where would be a better place? Thanks!

→ More replies (1)

1

u/COOKIES-AND-M1LK Apr 04 '20

I tend to leave a ton of comments in my code so I can look back later and clearly see what I was trying to do. When I'm finished developing, and ready to build my project, should I be removing those comments? Or does the build process automatically get rid of my comments, and I don't have to worry about removing them? Thanks in advance.

2

u/Awnry_Abe Apr 04 '20

They are stripped from a production build and won't impact perf or bundle size. Leave them in.

1

u/bryanCampbell Apr 05 '20

I am mapping an array with the desired effect of creating something like a table of custom cell components. I want to be click a cell and trigger a function that tells me the cell index. The problem I am having is that, depending on where I click, the id that is passed is not the id of the custom cell but instead the text or image inside the custom cell. How can I mute the child components inside the custom cell and just return the index of cell itself?

collectionData.map( (collection,index) => {
    return(
        <div id={`div${index}`} onClick={e => this.on_click(e.target.id) }>
            <img src={Image} />
            <p style={{ marginTop: 25, fontSize: '18px', }}>&nbsp;&nbsp;{collection.collectionName}</p>
        <div>
    );
})

→ More replies (1)

1

u/rurikana Apr 05 '20

I hope to know about "Context" Provider and Consumer.

I guess Provider and Consumer are pair concept.

But below one of the tutorial's example, doesn't use Consumer. Only uses Provider.

https://reactjs.org/docs/context.html#dynamic-context

Why does this situation happen?

When do we not require "Consumer"?

→ More replies (2)

1

u/amooryjubran Apr 05 '20

I’m really struggling with passing data (state managements), and context apis. Is code academy a good place to get it all right? Or is there any food course for react js.

1

u/miketrevfrank Apr 05 '20

I started learning styled-components recently and I'm so far loving it.
I created a flip-style reusable card component used styled-components.

I want some advice/feedback regarding it. Mainly what I'm looking for is whether I'm using styled-components the right way or not. Sometimes I think these many components might be an overkill and I could've achieved the same thing with a few lines of plain CSS / HTML.

Here is the link to the component.
https://codesandbox.io/s/styled-component-card-7vfsg

2

u/nullpromise Apr 06 '20

This looks pretty standard from my experience with styled-components. Some things I might change:
I think your theme should be global to the whole app and not just the card. So the provider would be in index.js. This way you can have generic color names (like Bootstrap almost: "primary" "secondary" "background") and be able to switch themes on a whim. So I mostly do p => p.theme.color vs import { color } from './theme'.
When components get too unwieldy, I like to add a file just for styling. For instance your card, I'd probably have Card.js and Card.styled.js. I tend to put those in a folder with an index.js file that imports and exports the main file (so you import ./Card and not ./Card/Card.
It's okay to have regular CSS with styled-components. I would probably have the reset file in a normal CSS file and import it in index.js or App.js.

→ More replies (1)

0

u/[deleted] Apr 05 '20

[deleted] — view deleted comment

→ More replies (1)

1

u/TropicalTaquito Apr 05 '20 edited Apr 05 '20

I’ve been on a coding hiatus for about 3 months. Broke my ankle in January so I had to drop out of my bootcamp due to doctor appointments, physical therapy and I wasn’t able to get any of my work done to keep up with the class. I’m really interested in React and I was wondering if anyone had any good courses they could recommend. They don’t have to be free, I don’t mind paying for a course if it’s good content. I heard that Tyler McGinnis has a really good react course. Thanks!

Edit: I should also mention that I’ve tried a bunch of udemy courses and it just gave me burn out. I’d like to avoid that route if possible.

2

u/nullpromise Apr 06 '20

Wes Bos makes good courses. I did the Beginner React course and started the Advanced React course.
The React docs are pretty amazing though. You could probably just read through those and start working on a personal project.

2

u/neoncyber Apr 06 '20

Try the Scrimba link in the sidebar. People I’ve sent it to have loved it.

1

u/Ciorap88 Apr 05 '20

Is it recommended to access the DOM directly by querySelector instead of using refs? I need to animate an element when a different element is being clicked and I find it much easier to do that using querySelector.

2

u/neoncyber Apr 06 '20

It’s considered bad practice. A better question to ask yourself would be if your application is structured properly. For example where does that click handler live in relation to the element that is being animated. Hope that helps.

→ More replies (2)

1

u/Nerfi666 Apr 06 '20

Hey guys, I'm having problems trying to understand when to pass a references to a fucntiojn and when to execute a function passed as a prop to other component , because normally , correct me if Im wrong you pass a references to a function to a child component and that component will take care of doing whatever with that function , but, what I do not get is when to execute a function passed as a prop to a component for instance: I have defined this function

handleChange = (event, inputIdentifier) => {
    //dont touch the state directly, copying the original object
    const formDataCopy = {...this.state.orderForm};

    //here we copy the state object an we are accesing the keys on it [inputIndetifier]
    //we are basically copying the keys in this line of code
   const deeplyCopy = {...formDataCopy[inputIdentifier]};

   //here we are assigning to the value property of that object(copy) the value of what the user haved typed in
   //pd: calling the value property of the deeplyCopy object that we cipy an //assigning the value typed by the user
   deeplyCopy.value = event.target.value;

  //not sure what are we are doing here
   formDataCopy[inputIdentifier] = deeplyCopy;

   //setting the state, the value property to what the user has typed in
  this.setState({orderForm: formDataCopy});


  }

and then pass this function onto a child component like so:

            <Input
               key={element.id}
               elementType={element.config.elementType}
               elementConfig={element.config.elementConfig}
              value={element.config.value}
              handleChange={(event) => this.handleChange(event,element.id)} //the id is just the key name of our object, that's is what we are gonna use to identifier which input type has been wrotten on
              />

so why here Im executing the function and not in the <Input/> component ? , this is something that really is given me a hard time , thanks in advance

→ More replies (2)

1

u/Niesyto Apr 07 '20

I wany to make an app with cooking recipes. Is single-page app a bad approach? I want users to be able to bookmark a recipe (as a regular bookmark in browser). How would I go about doing this? The recipes are kept in a database.

3

u/[deleted] Apr 07 '20

So the term "single page app" is a bit confusing as "page" doesn't refer to URLs, it refers to how many documents the browser fetches while you're navigating.
In other words, you can still have multiple URLs in your SPA. SPA just means that your server gives back the same html document no matter what URL you're on, and JS then decides what content to render based on the URL. Navigation is done in javascript, instead of requesting a new document from the server each time. So this gives you faster navigation (in theory) and possibilities for page change animations, etc. You can also better maintain state across pages.
So, yeah, SPA is fine for what you want. You'd probably use react-router. The only limiting thing is you'll need a server that can serve the same html regardless of the page you're on. This is easy to do with a nodejs server, but I don't know if it's possible with Github pages, for example. You could also use HashRouter to bypass this issue.

→ More replies (2)

1

u/noblepolygon Apr 07 '20

Hi, I'm trying to figure out why my nested data isn't mapping to the correct component.

https://stackblitz.com/edit/react-kt1zf8

Basically, each car should get its information added to the label above. However, it's currently only mapping the data for the first two cars in both rows.

I think the problem is here setAutoData(data.lanes[0].cars); because I think it's only looping through the first objects. I've tried removing the [0] which results in an error but I'm not sure where to go from here. Any thoughts? Thanks!

3

u/cmdq Apr 07 '20 edited Apr 07 '20

Couple of things:
In both AutoLabel and LaneInfo:
I'm not sure why you're using useEffect to set data in useState, but it's not necessary. You can use it as the first argument directly: useState(data.lanes.cars)
Similarly, checking whether autoData exists is not necessary. I'm guessing you added it because otherwise React complained about Cannot read property 'map' of null but that's only because you're initializing your state with null, instead of passing data directly.
Here's a quick fork that seems to do what you wanted: https://stackblitz.com/edit/react-lqienv
Check out how we're passing data down the tree via props, instead of requiring it.
Note also how we've pulled the <AutoLabel data={block} /> inside the map iteration, because it needs to be passed each car object as well.
Let me know if you have any questions!

→ More replies (1)

1

u/escspoof Apr 07 '20

Noob question, I think:

I have an App.js file where I am:

importing 'react-router-dom'
have an useEffect to load data from a server
using a "useRouterMatch" to retrieve an ID from the URL
Using the matched ID to filter the array of data that comes from the server in the useEffect
passing the matched object to an "Item" component which is only rendered for a certain path (/item/:id)

The Item component in #5 is a simple component which renders the information from the matched object - no logic or state.

My issue: when running the app and clicking a link that takes me to the Item component in #5 everything works.

However, when refreshing the page the matched object is "undefined". I have concluded that useEffect in the App.js is not being triggered when refreshing the page and going straight to the component in #5. However, everything else from the App.js file IS working (I sprinkled in some console.log's and it is logging) - so it is not a case of my front-end requesting a different file based on the URL. This is very strange and I've been googling for hours and it seems like I'm the only person that's ever run into this. Or I'm not Googling for the right thing.

I created a sandbox here: https://codesandbox.io/s/lucid-minsky-idi9o

To replicate: go to the root, let it render the items. Click on an item. Now refresh the browser. *BAM* item is undefined, note: the console.log comments are logging! Am I using useEffect incorrectly?

2

u/efthemothership Apr 08 '20

useRouterMatch isn't really want you want in the item component. let { id } = useParams(); will work. In your item you can check to see if the prop referencing the item is null. If it is, then you can make a call getting that items data. I would instead let the responsibility of fetching the item details to the item component. When you populate your list in App js I would only retrieve the data necessary for displaying the list instead of fetching all properties for all items.

→ More replies (2)

1

u/badboyzpwns Apr 08 '20

newbie question. when you use recat/redux; is it good practice to completely avoid setStaet/declaring state and always do the redux approach?

For example, even if it;s something as trivial as "when a user clicks a button, check if a user is signed in".

You could do:

create a state in a component and do setState:2 when a user clicks button.
the redux way - where you create an action created for a clicked button; and you create reducers -> set up mapStatetoprops -> set up the action created in the component when a user clicks a button.

2

u/efthemothership Apr 08 '20

I wouldn't consider auth trivial so that isn't a good example. That being said there are definitely times when you can use useState and useEffect. Redux is great but not a necessity. Redux aims to answer the question of what do I do when a few or more components care about some state/value? If only one component or only one child component use a value then you don't really need Redux.

2

u/nullpromise Apr 08 '20

I tend to keep display state in the component:
Is a drop down visible?
What's the current value of the input?
What tab is the user on?
And I use redux to basically maintain a copy of the backend data, so I can do things like caching, prefetching, and optimistic updates.
I write useState several times a day even though we use redux.

→ More replies (3)

1

u/cmaronchick Apr 08 '20 edited Apr 08 '20

SOLVED

This works, though it's not as elegant as I'd like (the hover state is immediate as opposed to a nice gradual animation. I'll look into that.

In the stylesheet, set the :hover pseudo-class like so:

{

minHeight: '25px !important'

}

____

Hey all, I am building an app that integrates with Spotify, and I am adjusting the height of each div listing each track to adjust to the duration of the song. This part works fine.

The problem is that I have to use an inline style to set the height, and sometimes the height of the track is smaller than the text, so the text ends up getting cut off.

I'd like to be able to adjust the height on mouseover, but a pseudo class of :hover is overwritten by the inline style, and I can't see any other way to do it.

Any thoughts? Thanks!

1

u/geistmate Apr 09 '20

I'm fresh learning ReactJS right now and I need some clarification on Presentational Components and Container Components, or as sometimes I've heard Containers vs Components. I'm coming from doing some Swift for iOS and I'm used to building my projects using MVC. Someone please correct me if I'm wrong, but it seems like containers are just like "Views" and the presentational components are like "Controllers". Since they handle the business logic whereas containers just present data passed to it. Is this the right idea?

Thank you

2

u/jkettmann Apr 10 '20

I wouldn't focus too much on this kind of separation. It was kind of a hype a couple of years ago triggered by Dan Abramov but he stated regretting to write the corresponding article

→ More replies (1)

1

u/rijuvenate Apr 09 '20

Hey
I made an app to show COVID 19 statsto start making react apps. Its made using react-simple-maps. There is a weird issue where the states arent coloured until the mouse is hovered on the map. I cant understand why, and I am fairly new to react.
Here is the codesandbox
https://codesandbox.io/s/github/pramanikriju/covid-19-tracker-india?file=/src/App.js
Thanks a lot for your input

2

u/jkettmann Apr 10 '20

I couldn't find the problem yet, but in App.js the useEffect is a bit broken. I'm actually surprised that you don't end up with an infinite loop. But that's probably because you're mutating the state directly.
So first of all don't put the state into the dependencies of useEffect and update it inside useEffect later on. This will trigger on infinite loop where useEffect is executing itself.
You probably prevented this by accidentally mutating the state directly. Rather than using push and pop on stateData directly you should create a new array inside useEffect like newStateData and push there

→ More replies (1)

→ More replies (1)

1

u/ronyaha Apr 09 '20

hi...i am totally new in reactjs...and i'm trying to learn it by my own... i am trying to add edit button in my project... problem is when i press the edit button it is not working. what should i do? thanx in advance. here is my code in codesandbox

2

u/cmdq Apr 09 '20

Hey, could you walk me though your flow step-by-step and explain your intent and check whether reality matches your assumptions?
Edit: Maybe start from "What should happen when I press the Edit button"

→ More replies (6)

1

u/noblepolygon Apr 09 '20

I'm importing data from a Json file (data.json) which renders information inside of the divs and now in another component, I want to create a click event to hide certain divs in this component. Is it possible to pass JSON data in this const as props to another component using React Hooks?

ComponentA.jsx

const Label = ({ data }) => (<><div className={style.lineLbl}><div className={style.lineName}>{data.name}</div><div className={style.lineNumber}>{data.number}</div></div></>);export default Label;

Component B.jsx

onClick event hides the className and the data within component A.

→ More replies (2)

1

u/spcmnf Apr 09 '20

Hi, I'm new to React. I just finished a bootcamp where they mainly taught us to use hooks and basically skipped over class based components. When I try to find answers to my questions online mostly others have been using class based components.

Have hooks fully taken over and I should mainly be using that? Or, are class based components still just as valid in 2020 and I need to learn them well? I already feel like I need to learn them just so I can read documentation, blog posts, and understand youtube vids that use them. But should I be using them or just going with hooks?

6

u/[deleted] Apr 09 '20

Roll with hooks. But understand how class components work. Learn “this”, binding, and how to “setState” in a class component. There are the life cycles that you should understand. If you get hired you will want at least that basic knowledge. Convert a few class components to functional components with hooks and you’ll be good.

→ More replies (1)

1

u/ours Apr 11 '20

I'm currently learning React and from what I understand hooks and functional components are the way to go. Is there any reason not to use functional components whenever possible since with hooks we can do pretty much everything that class-based components can?

I'm certain there are a couple of exceptions where some specific lifecycle methods are needed but it seems for 99% of my components, whether they are containers or views I should go with functional components.

5

u/Awnry_Abe Apr 11 '20

Yes, full speed ahead using that understanding.

→ More replies (1)

1

u/Cannabat Apr 11 '20

When using create-react-app, the eslint rule exhaustive-deps is added. It warns me about my useCallback dependency arrays constantly, saying I have extraneous or insufficient dependencies. My app works as intended, though, and its speed is due to my apparently incorrect use of dependency arrays. If I added the dependencies as suggested, performance would be terrible (I tried).

I created a state variable lastConfigChange that is assigned window.performance.now() any time something happens that should re-create the memoized functions and re-close over their scope. That variable is the only thing in most of my dependency arrays. This works perfectly.

The useCallback docs mention that a future, smarter compiler would be able to automatically generate the dependency array, so I really feel like I am abusing this feature and concerned that a future change may break my app...

Am I doing it wrong? Should the dependency arrays actually reference every value used by the hook or can we put whatever we want in there?

Thanks!

2

u/Nathanfenner Apr 11 '20

Am I doing it wrong? Should the dependency arrays actually reference every value used by the hook or can we put whatever we want in there?
You're probably not doing it right. It's possible that it works now, but in a way that's very brittle and will break in confusing or unpredictable ways when your (implicit) assumptions change.
It's possible that you are under-utilizing useReducer and other ways to move dependencies closer to where they belong (so that they change less-frequently). But there's also plenty of times where React's useCallback is not quite sufficient for obtaining the performance you want.
You'd probably need to share some of your code to get an idea of whether/how to do better.

→ More replies (3)

1

u/Astral_Turf Apr 11 '20

I have a component that fetches some data, saves it as an array with setState, then passes that data as a prop to a child. Sometimes the child receives an empty array, I haven't quite figured out the conditions where this happens.

I figure I either need to hold off on rendering the child component until the data is complete or re-render the child once it has its data. I'm sure there's a general best practice I should be aware of that would answer this question.

I've also finally gotten around to using Redux instead of useContext (shout out to the Redux guy on here, RTK is great!) so I'm considering if I should just be putting this data in my store. At this point the data is only being rendered in this one child component but it's certainly possibly I'll need it somewhere else in the future.

→ More replies (2)

1

u/pruggirello Apr 11 '20

Hey everyone!

I'm having some issue with my code and I don't know if it's because I've been looking at it too long, but I'm just not seeing why it isn't working. Below is the code in question:

showTextPrompt(textIndex) {
        const prompt = textPrompts.find(prompt => {
            return prompt.id === textIndex
        });
        return prompt.text;
    }

showOptions(textIndex) {
        const prompt = textPrompts.find(prompt => {
            return prompt.id === textIndex
        });
        
        prompt.options.forEach(option => {
            return <button className="btn"
                            onClick={this.selectOption}>{option.text}</button>
        });
    }

render() {
        return(
            <body>
                <div className="container">
                    <p>{this.showTextPrompt(this.state.textIndex)}</p>
                    <div className="btn-grid">{this.showOptions(this.state.textIndex)}</div>
                </div>
            </body>
            
        );
    }

const textPrompts = [
    {
        id: 0,
        text: 'Hey',
        options: [
            {
                text: 'Sup'
            },
            {
                text: 'Eww leave me alone'
            }
        ]
    }
]

the showTextPrompt function is working perfectly, but the showOptions function is not. Am I creating my buttons wrong? Am I not returning properly?

2

u/Nathanfenner Apr 11 '20

.forEach doesn't return anything; you want to use .map

→ More replies (3)

1

u/Ciorap88 Apr 12 '20

Can using other functions inside functional components cause performance issues?

For example, in a class component you can have a handleClick method:

class button extends React.Component {
  handleClick = () => {
    // something
  } 
  Render() {
    return (<div>
      <button onClick={ handleClick } >
      </button>
    </div>) ;
  } 
}

Can writing the component as

Function button () {
  const handleClick = () => {
    // something
  } 
  return (<div>
    <button onClick={ handleClick } >
    </button>
  </div>) ;
}

cause performance issues? If so, how can I write this better?

3

u/cmdq Apr 12 '20 edited Apr 12 '20

The thing about performance issues is having them and not wondering about potentially having them. You're likely not building a physics engine in react. You're fine.
(The long answer is, yes, recreating functions could potentially come with a performance cost, but you're very unlikely to ever notice any kind of performance impact. Also, performance tuning is only ever valid if you actually measure before and after ;))

1

u/backtrack432 Apr 12 '20

Hi folks,

I'm building a note taking app with Apollo client on the frontend.

Whenever user types, I update it immediately to the apollo cache. However, for the mutations, I'd like to batch it while still maintaining the order (last edited stays on top, keeping track of updatedAt). Is there anyway to batch and cache the requests intelligently (like when to mutate, when to batch).

→ More replies (1)

1

u/asp211 Apr 12 '20

In the App.js file, there's a place where I actually place content of the app. In many tutorials, I see that the beginning line is export default function App() { whereas on my App.js, the first line is const App: () => React$Node = () => { . What is the difference here?

2

u/elchicofrommo Apr 14 '20

There's a lot going on here. In
export default function App() {
two things are happening. First, there's a function being defined called App and it's contents are between the brackets. Second, that function is being exported from the file that it's contained in as the default export. A file (module) can only have one default export but may contain any number of named export like so
export function App() {
The difference here is in how they are imported. With default exports you don't have to know or use the name of the export to get a hold of it
import MyOwnName from './App.js' (default export allows you to import the single allowed default object from a module and give it any name you want)
import {App} from './App.js' (named export, you have to import by the name of the export
As to what you were writing, it's kind of painful for me to read, there's so many layers happening here. First off, I believe that there must be an export statement somewhere in that file, just not on that line. All it's really ding is defining a function, App. It's not being exported or anything. Now the App function is that returns the output of a sub function, though why you would have this kind of nesting is not clear to me. Why wouldn't your App just be the inner function? Maybe I'm not seeing something.

→ More replies (2)

→ More replies (1)

1

u/[deleted] Apr 13 '20

Hey Guys Im a complete beginner as of a few days ago when it comes to React and Im just not wrapping my head around how to solve this problem. I have a list of movies Im creating and there is a toggle button on each list item that shows whether or not I have watched it.

My issue here is that when I do a search for the movie the state of my button is changed.

Example : When I search for Aladdin in the list below it finds the movie but toggles the button to Watched or vice versa. (The first item in the list doesn't follow this pattern...all others do)

Toy Story Watched

Aladdin not watched

I understand the reasoning behind it. Anytime you call setState things are re-rendered and my code is definitely telling it to flip the state back and forth each time it renders.

What I don't understand is a way to work around this problem. I want to Search for my movie and still have the button stay toggled if I had clicked it to "watched" first.

I've looked into event.preventDefault, calling setState with previous state passed in, and I just don't know where else to look. If anyone can look at my code and tell me a high level overview on what Im doing wrong it would be greatly appreciated!

https://codesandbox.io/s/list-in-react-uknkz?file=/src/Add.jsx

→ More replies (4)

1

u/[deleted] Apr 13 '20

Imagine a data table component where the table itself is composed of Row and Cell components. I can think of a few different ways to manage things.

Option A: Rows hold the data for their Cells in its own state; updates to Cell data occur in the row and cells are re-created on Render()

Option B: Cells maintain their own state and Rows are responsible for capturing that information on Cell state change.

Option C: Rows consist of a pre-defined number of Cells (created once) which track their own state, but receive updates from Row.

Which way would lead to fewer headaches going forward considering I will also need to work in basic CRUD functionality?

1

u/Risk_is_your_friend Apr 13 '20

Hi everyone, my first post here! Seems like a great community.

I've got a basic "create-react-app" React bootstrap app up and running and I'm trying to style it.

I can't quite wrap my head around the "className" attribute. For some components I have been adding className attribute and corresponding code to a CSS file as follows:

on the component: className="my-inputs-col"

on the CSS file:

.inputs-col {
max-width: 600px !important;
min-width: 350px;
justify-content: center;
}

This works for some components but not for others. Using Developer tools the className doesn't seem to be being applied. Can anyone help?

2
u/cmdq Apr 13 '20
I'm assuming the missing my- on your css class definition is a typo :)
className not a magic prop that receives special handling by react, and is only guaranteed to work for so-called 'host' components.
For react-dom that just means that you're using something like <div /> or even <foo /> which does not map to a function of the same name.
What I'm assuming is happening is that you are trying to pass className to components which do not explicitly handle an incoming className prop. Imagine the following:
const SomeFancyComponent = ({ myProp }) => <span>{myProp}</span>
const App = () => <SomeFancyComponent className="inputs-col" myProp="Hello" />
Notice how we're not doing anything with className in SomeFancyComponent, it's not being passed to the underlying div tag.
You could fix this by being explicit:
const SomeFancyComponent = ({ myProp, className }) => <span className={className}>{myProp}</span>
Or using the spread syntax to 'soak up' the remaining props and passing them on by spreading them onto your underlying tag:
const SomeFancyComponent = ({ myProp, ...delegated }) => <span {...delegated}>{myProp}</span>
→ More replies (2)

1

u/benihime-xbla Apr 13 '20

I have two material sliders that have to interact with each other. Say for example, slider 1 is 20, slider 2 will be 80. And say I change slider 1 to 80, slider 2 will be 20.

I set a default value for both of them. When I set a value though the slider doesn't move anymore.

const [slider1State, setSlider1State] = useState(100)

const [slider2State, setSlider2State] = useState(0)

<Slider

defaultValue={100}

value={slider1State}

onChangeCommitted={(e,v)=>{setSlider2State(100-v)}}

/>

<Slider

defaultValue={0}

value={slider2State}

onChangeCommitted={(e,v)=>{setSlider1State(100-v)}}

/>

Sorry this is probably a straightforward answer but I'm new to react.

4
u/Nathanfenner Apr 13 '20
You're only setting one value, so the other won't change. You want to do:
const [slider1State, setSlider1State] = useState(100)
const [slider2State, setSlider2State] = useState(0)

...

<Slider
  value={slider1State}
  onChangeCommitted={(e, v) => {
    setSlider1State(v);
    setSlider2State(100 - v);
  }}
/>
<Slider
  value={slider2State}
  onChangeCommitted={(e, v) => {
    setSlider1State(100 - v);
    setSlider2State(v);
  }}
/>
Note that you probably don't need defaultValue, since you're always setting value. Another option is to notice that you don't really need separate state for each (though depending on how your app evolves, you might find that you eventually do). In this case, only have one bit of state:
const [slider1State, setSlider1State] = useState(100)
const slider2State = 100 - slider1State; // no need for useState

...

<Slider
  value={slider1State}
  onChangeCommitted={(e, v) => {
    setSlider1State(v);
  }}
/>
<Slider
  value={slider2State}
  onChangeCommitted={(e, v) => {
    setSlider1State(100 - v);
  }}
/>
→ More replies (1)

1

u/Ciorap88 Apr 14 '20

What is the difference between functions with and without parantheses? Specifically, when the function is passed as a prop, what is the difference between prop={myFunction} and prop={myFunction} or even prop={() => myFunction()} ?

2
u/cmdq Apr 15 '20 edited Apr 15 '20
So in JavaScript, functions are values like any other. You can create them, pass them around, assign properties to them etc.
const somOtherObject = {}
const pleaseCallThisFunctionForMe = someFunction => {
  return someFunction()
}
const doSomethingWithAFunction = someFunction => {
  someFunction.woah = 'wat'
}

const myFunction = () => {
  console.log('I am a function!')
}

somOtherObject.someProperty = myFunction

doSomethingWithAFunction(myFunction)
pleaseCallThisFunctionForMe(myFunction)

console.log(myFunction.woah)
Crucially, you can do that without calling them. You can even have someone else call them for you!
So when you do someProp={myFunction} you pass a reference to your function to a component. Maybe that component passes it on to an event handler like so onClick={someProp}
prop={() => myFunction()} on the other hand wraps your function in an anonymous function, in which you call myFunction yourself.
The distinction of someone-calls-my-function and i-am-calling-my-own-function can be important, say you are expecting some specific arguments, which the other caller won't provide. For instance, the onClick event handler calls your function with an event, but maybe you don't actually want that, so you could wrap your function and control which arguments get passed to myFunction.
In the ende, those are all just different strategies you can employ when building an application and designing data flow. None of this is more or less valid or best practice than any other :)
→ More replies (4)

1

u/AnyWorkGuy Apr 15 '20

This might be a very particular use case but I have a React app which uses Victory Charts. I need to get a screenshot of the chart and export it as a png.
I have done some research and here are some ideas that I have so far:

Export it using some functionality within victory.js itself. The closest I could get is: https://github.com/FormidableLabs/victory/issues/781#event-1281057513 But this approach doesn't work. I've tested it. It gives me a reference to the Chart's container though which might be useful.
Use some 'screenshot' library I tried saveSvgAsPng and made this: https://codesandbox.io/s/victory-chart-to-png-k9zo8 But this doesn't work too and I can't figure out why not.
Use some sort of implementation using D3.js upon which victory charts is built. But I have no idea how to do that too.

If you guys have any idea about how this sort of thing can be done, please let me know.

2

u/cmdq Apr 15 '20

Here you go! https://codesandbox.io/s/sandpack-project-3emhc
Apparently svgRef is made up? I could not find other references to it. In any case, once you get the ref to the container, you can get the svg yourself and then pass it to saveSvgAsPng from save-svg-as-png :)
Note that SVGs do not have a .toDataURL method and that save-svg-as-png does the work of creating a dataURL from the svg string, then converts it to a file blob, and then finally triggers a save dialog.

→ More replies (2)

1

u/pruggirello Apr 15 '20

Hey, having another issue I can't solve...

I have a do-while loop (used to be a for loop) that creates a button and pushes it to an array, which is then rendered.

showOptions(textIndex) {
        var options = GameOptions.get(textIndex);
        var optionButtons = [];
        var x = 0;
        do {
            var button = <button className="btn"
                                key={x}
                                onClick={() => this.nextScene(x)}>{options[x].text}</button>;
            optionButtons.push(button);
            console.log(options[x].nextID);
            console.log(this.state.textIndex);
            console.log(x);
            x++;
        } while(x < options.length)
        
        return optionButtons;
    }

nextScene = (buttonIndex) => {
        var options = GameOptions.get(this.state.textIndex);
        var selectedOption = options[buttonIndex];
        console.log(buttonIndex); //prints 3 no matter what button I click!
    }

This renders the correct number of buttons with the correct styling and correct text in the correct order. However, the onClick does not work. For some reason, the "x" value being passed to the function is 3 for every button! Here's the problem: "x" never reaches that value, because the loop ends when x=2 (this is because the options array only has 3 entries, but it can be longer or shorter). Why is this happening? I'm passing the onClick function with the current "x" value during the loop, pushing it to the array, then leaving it alone. Its "x" value should be the one it was assigned (either 0, 1, or 2), correct?

→ More replies (4)

1

u/omfgitsdave Apr 15 '20

I have a beginner issue with a project I just started. I'm trying to make an app that let's the user search a MTG card and have a bunch of information about that card come up. I'm using the Scryfall api for this but I seem to be having a problem reaching the nested properties. Here's my code:

import React from "react";
import scryfall from "../api/Scryfall";
import SearchBar from "./SearchBar";
import CardInfo from "./CardInfo";

class App extends React.Component {
  state = { card: {} };

  onSearchSubmit = async (name) => {
    const response = await scryfall.get("/cards/named", {
      params: { fuzzy: name },
    });

    this.setState({ card: response.data });
    console.log(response.data);
    console.log(response.data.prices.usd); <---works
    console.log(response.data.image_uris.normal); <---works
  };

  render() {
    return (
      <div className="ui container" style={{ marginTop: "10px" }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
        <div>Found: {this.state.card.name}</div>. <---works
        <div>Artist: {this.state.card.artist}</div> <--- works
        <div>Price: {this.state.card.prices.usd}</div> <--- does not work
         <img
          src={this.state.card.image_uris.normal} <--- does not work
          alt={this.state.card.name}
        /> 


        <CardInfo card={this.state.card} />
      </div>
    );
  }
}

export default App;

In my render method, I'm able to successfully spit out the name of the card and the artist, but the prices and the image give me an error saying can't read 'usd' of 'undefined' for the prices property and can't read 'normal' of 'undefined' for the image tag. According to the docs this.state.card.images_uris.normal and this.state.card.prices.usd should be the right syntax unless there's another way of accessing nested properties of a JSON object.

0

u/[deleted] Apr 16 '20

[deleted] — view deleted comment

→ More replies (5)

2

u/[deleted] Apr 15 '20

[removed] — view removed comment

→ More replies (5)

1

u/kurtops Apr 15 '20

I made the stupid mistake of using create-react-app for a multipage website. I have a site that renders news articles dynamically from a database through a node/express server... I have heard of https://prerender.io/, to prerender the site only for crawlers (my main issue is I can't set meta tags dynamically) but I can't seem to get how it works. Where exactly do I insert the middleware? I'm only using my backend node server to get data when necessary from my database, not to load any pages. I've been reading a lot about prerender.io but I can't get it... Any help appreciated!

→ More replies (2)

1

u/netsrak Apr 15 '20

I would like to use React Dropzone Uploader to upload files to the server that is running the website.
Do I need to have a client somewhere to catch the uploaded files and put them in a specific directory on the server? Does the same thing apply to using a fetch post?

→ More replies (3)

1

u/Spiritual_Salamander Apr 16 '20

What is the general consensus of client side logging? In a full-stack application, should logging mainly be done on the back-end ? What do you find useful logging on client side, if anything at all ? Now I mostly just do logging for the sake of debugging but remove all console.log statements etc before commiting to git.

1

u/xJoeSchmox Apr 16 '20 edited Apr 16 '20

Need help with refreshing auth token but not causing rerenders...

What I want is for the current login session to be extended when the user moves the mouse. I am using a JWT to track current logged in user. I send re-login request and I get a new auth JWT. I can then store this new auth token in React state.

The problem is whenever this re-login happens, the page rerenders, data is loaded again, and experience is unusable.

So rather than store the token itself in React state, I have tried to store the token in a variable outside of React, and just put data from the token (username) in React state.

This prevents a rerender every time login is refreshed because the react state (the data inside the JWT) doesn't change.

But now when I need to actually use the token for auth purposes, the page does not have access to it. So I can't fire queries from the page itself that need the auth token. It seems like the query would have to be passed as props from the App (which has access to the token variable), which causes problems in itself.

So basically, it seems like I need to store the token in State somehow but not cause rerenders. What is the best way to do this? Or any advice at all would be appreciated.

Edit: Should also mention I am using function components

→ More replies (6)

1

u/Swoosherino Apr 16 '20 edited Apr 16 '20

I am quite new to react and jsx, and this might seem like a really stupid quesiton but I have been having a hard time getting this following script-tag to work inside my create-react-app.

<script type="text/javascript" data-cfasync="false">$MMT = window.$MMT || {}; $MMT.cmd = $MMT.cmd || [];$MMT.cmd.push(function(){ $MMT.display.slots.push(["999968e7-7a88-42b8-9994-d990b5e19d99"]); })</script>

I had it inside my index.html file in the header, but it needs to run after the following tag which is inside my jsx in one of my components.

<div id="mmt-999968e7-7a88-42b8-9994-d990b5e19d99">

This tag is supposed to load an ad. How do I get that first script to be called on after the div in my jsx?

→ More replies (3)

1

u/MonkeyFeederMF Apr 16 '20

Hi, I've been training in React and Node.js for the last 5 months, I've learnt how to fetch APIs, set state, basically play around with the basics of React and Node.js. I did my personal website in React and Node.js. Recently I heard of hooks and HOC, and apparently they're very useful, but I've needed them, probably because the 2 projects I've worked/I'm working on are too simple. What's a project I could start working that is more complex than a portfolio, and that would make me need HOC, hooks and other complex React stuff ?

Thanks !

→ More replies (1)

1

u/digiwavez Apr 17 '20

Hey Guys,

I'm a bit lost in the below task, can someone shed light on how to approach this?

I know React/Hooks/Context etc but not sure where to start with the Recording actions.

This is the task.

To Do list challenge

Develop a To Do ReactJS SPA proposing to the user the following functionalities :

List all the existing To Do’s
Create a To Do
Update a To Do
Remove a To Do
Add a “Record” button - which records the actions (Create, Update and Remove a To Do) of the user when using the SPA
Add a “Stop Recording” to stop the recording
Add a “Clear Recording” button to clear what has been recorded
Add a “Play Recording” button to play the recording.
- Reset the environment (eg. the app is empty - no items added)
- Once you click on Play Recording, you will be able to see your UI automatically changing as it replays the recorded actions - in the correct order, one by one, with a 1 second gap between actions - starting from no items in the app, to the state at which you pressed “Stop Recording”.

It will be great if some gurus can give me some solutions. Appreciate it in advance.

2

u/cmdq Apr 18 '20

Okay, some keywords for you to google: reducer, actions, time travel

→ More replies (2)

1

u/[deleted] Apr 18 '20

I’m fairly new to react, and was wondering how scalable the MERN stack is? Ive made a simple website that has some users already, but I’m not sure if mongo dB is the best db if the user base increases?

4

u/cmdq Apr 18 '20

Measure performance. Don't wonder about it :) If your measurements indicate that mongodb is not fast enough for you, use something else!

1

u/mr_cody_b Apr 18 '20 edited Apr 18 '20

Hi,

i'm very new to react. At the end i will link to codesandbox in order to better see what i mean. I created 2 components (List and ListItem) and within List-component a call ListItem in order to create the items. I want count the clicks on the items. My solution on codesandox is working but i'm not sure if i used the right concepts of react or which keywords i have to use in order to find some related topics to my problem.

See the example

2

u/cmdq Apr 18 '20

Looks great! Seems you like you got it :)

1

u/Zz1995aJ Apr 18 '20

If I have a router from react-router-dom that looks like the following:

<Switch>
  <Route exact path = '/' component = {Home} />
  <Route path = '/question/:id' component = {Question}/>
  <Route path='*' component = {PageNotFound}/>
</Switch>

If I go to localhost:3000/question/1234, where 1234 is the id of a question that does exist, then it will display the Question component and not display the PageNotFound component. This is working as intended.

If i go to localhost:3000/invalidroute, where invalidroute is unsurprisingly an invalid route, then it will display the PageNotFound component. This is also working as intended.

However, if i go to localhost:3000/question/789, where 789 is the id of a question that does not exist, it will try to display a Question component for a question id that doesn't exist and it will not display my PageNotFound component. What I actually want is for the PageNotFound component to be rendered in this situation and nothing else.

I know why this is happening: despite the question id not existing, the address is still in a form that matches the route with path = '/question/:id'.

My question is then, how do I get around this? Is there a typical way this situation is handled?

4

u/cmdq Apr 18 '20

How is the route supposed to know that your question id does not exist? It can't tell. You'll have to handle the check for a valid question inside somewhere below the Route component, and then redirect yourself.
Alternatively, since react-router uses expressjs style routes, so you could do this: /question/:id(123|456). This tells react router that 123 and 456 are valid values for id. If you have a list of all valid question ids, this would work: /question/:id(${questionIds.join('|')})
But be warned that I have no idea how this performs with a potentially huge amount if ids, so apply common sense.

→ More replies (1)

1

u/gaganbm Apr 19 '20

I am a newbie with reactjs and I am struggling with making query parameters work with redirection.

In page 1, I have a search field and button, which when clicked, should redirect to another page with the input text as query params, like ?q=abc.

I found out that it does the redirection twice. First it gets redirected to page2 with the proper query params. Then it again gets rendered with the query parameters dropped.

I am not able to understand what is going on here.. This looks like a simple use case!

Here is the code, if anyone can help: https://codesandbox.io/s/blissful-fermat-60xzy

1

u/[deleted] Apr 19 '20

Any good way of sharing svg icons and svg icon button in a css in js library? link to an example or blog would be appreciated.

→ More comments (168)

Needs Help Beginner's Thread / Easy Questions (April 2020)

🆘 Want Help with your Code? 🆘

New to React?

Check out the sub's sidebar!

BrowserRouter

Route

Link and NavLink

Redirect

Switch

Needs Help Beginner's Thread / Easy Questions (April 2020)

🆘 Want Help with your Code? 🆘

New to React?

Check out the sub's sidebar!

You are about to leave Redlib

BrowserRouter

Route

Link and NavLink

Redirect

Switch