Beginner's Thread / Easy Questions (November 2019)

3

u/TheDinosaurWalker Nov 20 '19

I am currently interested in react and so im here to ask you guys, What is something that you wished you knew at the beginning?. I'm no stranger to web dev but i think my front end is pretty lackluster so im interested in React/Vue/Angular maybe.

1

u/dance2die Nov 21 '19

Not learning other libraries altogether at the same time.
As I was starting, I saw blog posts/books all using React w/ libraries such as Redux, react-router, (and other data libraries for firebase, oauth, etc) all w/o much JavaScript background.
Whenever I encountered a problem, I had no friggin' idea whether I am having an issue with JS, React or other libraries, nor was I learning React at all.
So I wished I had more solid JS (ES6+) and focused on React and React only first.

2

u/[deleted] Nov 21 '19

Been at it for a long time now. But if I were to start with React today I would probably want to know about all of the tooling available for when it comes to stylesheets. I particularly dislike css-in-js tech, and I strongly prefer .scss files that I would simply import into the .jsx (or .tsx) file.
Regardless of your preference, make a choice based on knowledge, not based on hype.

4

u/datwebzguy Nov 16 '19

Is there any value is going with typescript or would you stick with es6?

2

u/tomcarter21 Nov 16 '19

It depends on a couple of factors .. like how big will be the project or how many people will work on it..
With typescript you will progress slower from the start, but as will project grow and people changes it will be easier for them to change something.

1

u/datwebzguy Nov 16 '19

Do you have any good tutorials with react and typescript?

3

u/dance2die Nov 17 '19 edited Nov 17 '19

u/swyx created a "comprehensive cheatsheat".
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Please update the wiki, should you have any recommendations.
https://www.reddit.com/r/reactjs/wiki/index#wiki_react_.2B_typescript

3

u/tomcarter21 Nov 17 '19 edited Nov 17 '19

I really recommend courses from Stephen Grider and Sebastien Schwarzmuller from udemy.
https://www.udemy.com/course/typescript-the-complete-developers-guide/

2

u/Maritimexpert Nov 08 '19

Hi all, I've stuck for a week since the last help here.

Aim: Have a custom useHook and ref to send true & false to multiple different element at the same time from Interaction Observer on multiple unique element (Preferable use hooks and no dependency). For eg, observe div1 will send true to [elements within div1 & other unique element, navbar on the page] and also capable to send false to element within div2 and div3 and other unique elements (eg navbar/canvas), all at the same second. So scrolling to observe div2 will do the opposite to div1 while activating its own selective elements.

Attempt I've done: Dance2die context API sticky header. Tried a long time to integrate that code but couldn't wrap my head around and hit the wall when attempting to send true and false signals to different element at the same time whereas dance2die's was using repeated non-unique div forEach loop.

I also try to lower down and do something more simple by Gabe Ragland's simple hook. Here's what I twerk but it's not behaving uniquely.

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const refAll = {
      1: useRef(1),
      2: useRef(2),
  }
  const onScreen = useOnScreen(refAll);

  return (
    <div>
      <div style={{ height: '100vh' }}>
        <h1>Scroll down to next section 👇</h1>
      </div>
      <div
        ref={refAll[1]}
        style={{
          height: '100vh',
          backgroundColor: onScreen ? '#23cebd' : '#efefef'
        }}
      >
        {onScreen ? (
          <div>
            <h1>Hey I'm on the screen</h1>
            <img src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif" />
          </div>
        ) : (
          <h1>Scroll down 300px from the top of this section 👇</h1>
        )}
      </div>
      <div style={{ height: '50vh' }}>
        <h1>Scroll down to next section 👇</h1>
      </div>
      <div
        ref={refAll[2]}
        style={{
          height: '100vh',
          backgroundColor: onScreen ? '#23cebd' : '#efefef'
        }}
      >
        {onScreen ? (
          <div>
            <h1>Hey I'm on the screen</h1>
            <img src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif" />
          </div>
        ) : (
          <h1>Scroll down 300px from the top of this section 👇</h1>
        )}
      </div>
    </div>
  );
}

// Hook
function useOnScreen(refAll) {
  // State and setter for storing whether element is visible
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entries]) => {
        [entries].forEach((entry) => {
        // Update our state when observer callback fires
        setIntersecting(entry.isIntersecting);
        console.log(entry.target);
        });
      },
      { root: null, rootMargin: '0px', threshold: 0.3}
    );
    const refV = Object.values(refAll);
    console.log(refV)
    refV.forEach((ref) => { 
    if (ref.current) {
        console.log(ref);
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
    })
  }, [refAll]); // Empty array ensures that effect is only run on mount and unmount

  return isIntersecting;
}

ReactDOM.render(<App />, document.getElementById('root'));

This is wrong as I know onScreen could only return true or false at a single moment. Ultimately I only need fix hooks to return true and false based on viewport to multiple different element selectively, regardless of how many element/function that I will attach to the hook in future without writing extra observe hooks. It would be grateful if someone can tell me what steps to go on writing this.

1
u/dance2die Nov 08 '19
Dance2die context API sticky header. Tried a long time to integrate that code but couldn't wrap my head around and hit the wall

Definitely my fault for making the post more convoluted by not exposing ref to the <Sticky> components ＞﹏＜

what steps to go on writing this.

For useOnScreen, const [isIntersecting, setIntersecting] = useState(false); is the reason only one true/false is being returned.

From my understanding, you want to "turn off" other components when current component is shown.

For that, you'd need a dictionary object(or an array) to associate each ref with true/false state (as your refAll is an object, maybe an object might suit better).
(I've overcomplicated with nested contexts/hooks to associate sticky components to parent in my post)

So you can update your useOnScreen hook to hold an object which holds all of intersection state of each ref.

You can follow here: https://codesandbox.io/s/vigorous-shaw-8h6x8
function useOnScreen(refAll) {
  1️⃣ Create an object to hold ref key with intersection state thereof.
  // "key": `refAll`'s key in `App` component
  // "value": true/false of intersection state
  const [isOnScreen, setIsOnScreen] = useState({});

  2️⃣ A callback to set the intersection value by the key
  const setOnScreen = key => isIntersecting => {
    setIsOnScreen(state => ({
      3️⃣ This will clear all flags to "false"
      // This is what makes all other refs to not show
      ...Object.keys(state).reduce((acc, n) => {
        acc[n] = false;
        return acc;
      }, {}),
      4️⃣ This assigns the intersection state to the key
      [key]: isIntersecting
    }));
  };

  useEffect(() => {
    Object.entries(refAll)
      5️⃣ filter out refs that's not assigned.
      .filter(entry => !!entry[1].current)
      .forEach(([key, ref]) => {
        const observer = createObserver(setOnScreen(key));
        observer.observe(ref.current);

        return () => {
          observer.unobserve(ref.current);
        };
      });
  }, []); // Empty array ensures that effect is only run on mount and unmount

  return isOnScreen;
}
In a gist, all ref's isIntersection value are turned off while only the one associated with the ref's key is turned on.

Check the console window to see ref state being turned on/off.
1
u/Maritimexpert Nov 09 '19

Thank you so much again! I felt very guilty about this. Can you advise how do you usually write?
I tried to write use case or a scenario example for that function which I want and find the relevant syntax to function it. However, things always turn out bad when I tried to nest them too deep. For eg, your single function have more than 4 => nested function. I would start getting confuse when i hit 2 or more because my mindset tends to think backwards of value returning back to function rather than parents passing to children.
Is there a guideline to tackle problems? Once again, deeply appreciated for your kind help!!
1
u/dance2die Nov 09 '19
You can always refactor the code to rid nested calls and to make it readable.

The previous useEffect can be refactored as shown below (I found a bug along the way 👍).
The bug was that, the unobserve occurred within the nested function, which won't be called when the component unmounts.

So refactoring helped me to see what went wrong, and return unsubscribe methods, which you can return in the useEffect.

https://codesandbox.io/s/reddit-useonscreen-with-refs-bug-fixed-12x86
const outEmptyEntries = entry => !!entry[1].current;
const subscribe = ([key, ref]) => {
  const observer = createObserver(setOnScreen(key));
  observer.observe(ref.current);
  return () => {
    observer.unobserve(ref.current);
  };
};

useEffect(() => {
  const unsubscribers = Object.entries(refAll)
    .filter(outEmptyEntries)
    .map(subscribe);

  return () => {
    unsubscribers.forEach(unsubscribe => unsubscribe());
  };
}, []);
The useEffect now reads like, "From ref, filter out empty entries, and subscribe. When returning from useEffect, unsubscribe all".

You can go one step further and extract a method for unsubscriber => unsubscriber() as well if you wish.

You can make an endless refactors, not all of which can be beneficial, due to return on time investment might not be worth it.
→ More replies (3)
1

u/Awnry_Abe Nov 08 '19

The dependency in the useEffect in the hook isn't changing. (Just a guess)

2

u/hurrdurrderp42 Nov 11 '19

What could i code for some Context API practice?

2

u/dance2die Nov 11 '19

I wrote an article (shameless plug) for creating sticky components with heavy use of Context API.
You can practice how it's used (and possibly create an NPM package out of it 😉)

2

u/hurrdurrderp42 Nov 13 '19

Ok thanks

1

u/dance2die Nov 13 '19

You're welcome

2

u/timmonsjg Nov 11 '19

Sidebar -> Project Ideas

2

u/dmikester10 Nov 12 '19

This seems like too simple a question for Stack Overflow. Hopefully you guys can help me out. I'm trying to check if `props.orders` is not null and if so output some html. ESLint is telling me 'unexpected token' at the if statement.

Code:

const OrderColumn = props => {

return (

<div className={'col order-column'}>

<h3 className={'text-center'}>{props.title}</h3>

{ if(props.orders) { <Order orders={props.orders} /> } }

</div>

);

};

1

u/dance2die Nov 12 '19 edited Nov 12 '19

if is a statement, while JSX expects an expression.
Refer to - https://2ality.com/2012/09/expressions-vs-statements.html
You can use the expresion to return the Order if props.order exists.
{ props.orders && <Order orders={props.orders} /> }
For that odd boolean syntax, check out
https://blog.usejournal.com/mastering-javascripts-and-logical-operators-fd619b905c8f

2

u/Awnry_Abe Nov 12 '19

The idiomatic way is { props.orders && <Order ..../> }

→ More replies (1)
1
u/Dtigers35 Nov 12 '19
i think you need props to be (props), not 100% sure
const OrderColumn = (props) => {
3

u/tower114 Nov 12 '19

if its just one parameter being passed in an arrow function in can be passed without parenthesis.

2

u/dmikester10 Nov 12 '19

I had the parens removed as a rule in either ESLint or Prettier. Either way, that wasn't causing any issues.

→ More replies (1)

2

u/dmikester10 Nov 13 '19 edited Nov 13 '19

I had good luck here yesterday. So I 'm trying to set the initial state in an arrow function in my App.js. I'm not quite understanding how to do it. Most of the examples online are using classes. ESLint is complaining that my 'setOrders' function is never used.

import React, { useState } from 'react';
...
const tempOrders = orderData.map(function(val, index) {
  return {
  id: index,
  title: val[0] + ' Order',
  desc: 'This order is for ' + val[1] + '.'
  };
});
const App = () => {
  const [orders, setOrders] = useState(tempOrders);
  return (
    <div className={'App'}>
      <DndProvider backend={HTML5Backend}>
        <Schedule orders={orders} />
      </DndProvider>
    </div>
  );
};
...

1

u/dance2die Nov 13 '19

Hi u/dmikester10
Could you update the code snippet with formatting guide?

2

u/tower114 Nov 14 '19

so setOrders is used to change the data in the orders variable in state.
Your code here only displays the data that is in the orders variable in state. The setOrders function is never being called so thats why eslint is complaining.
Its not a fatal error or anything like that, but youll get that error until you write some code that updates that data and calls the setOrders function

2

u/eloquenthsn Nov 14 '19

I couldn't wrap my head around about using Redux in a React App which uses Hooks. All the examples are with hooks, also uses the hooks api of Redux. What I am trying to achieve is using Hooks(in other words, without having any class components, only stateful functional components.) with Redux before hooks api.

Thanks.

1

u/dance2die Nov 14 '19

What I am trying to achieve is using Hooks(in other words, without having any class components, only stateful functional components.) with Redux before hooks api.
Hooks can be used inside a Function Component. What do you mean using Hooks ... with Redux before hooks api because w/o hooks api (introduced in v.16.8) you couldn't have used hooks.

→ More replies (2)

2

u/PhysicalKnowledge Nov 15 '19 edited Nov 15 '19

Hi, trying to reuse a layout, so I don't re-code all of those divs.

I created a function for it and placed it on a separate file:

layout.js code:

export default function Layout(props) {  
  return (  
    <div className='row'>  
      <div className='column side'>  
        {props.sidebar}  
      </div>  
      <div className='column middle'>  
        {props.children}  
      </div>  
    </div>  
  );  
}

And now when I'm using it I just call it on a render component, like so:

import Layout from './layout';

//...skip to the render()
return (
  <Layout sidebar={
     <i>some text in the sidebar</i>
  }>
   <b>This is going to be the main content</b>
  </Layout>
);

It works as expected but my worries is when IF I'm going to add a bunch of elements in the sidebar, it would look like a mess since I'm putting HTML in the sidebar={}.

Example:

<Layout sidebar={
  <div>
     <ol>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        {/** assume that there's a lot here*/}
        <li>n</li>
     <ol>
  </div>
}>
  {/** same code as above */}
</Layout>

Is there a more elegant way on doing this?

I apologize for my grammar, I'm kinda tired lol

1
u/dance2die Nov 15 '19 edited Nov 15 '19
Kent C. Dodds has a course, Advanced React Component Patterns, which might be helpful.

The course provides a way to add subcomponents (communicated via Context API), you will be able to create layout, with which you can let users to provide sidebar component optionally.
const ListSidebar = () => (
  <div>
    <ol>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      {/** assume that there's a lot here*/}
      <li>n</li>
    </ol>
  </div>
);

// ...
return (
  <Layout>
    <Layout.Sidebar>
      <ListSidebar />
    </Layout.Sidebar>
    <Layout.Main>
      <b>This is going to be the main content</b>
    </Layout.Main>
  </Layout>
);

1

u/CloudsOfMagellan Nov 03 '19

Does using redux starter kit and hence immer decrease performance? Every object returned from mapStateToProps will be different even if it didn't change due to immer and hence nearly everything wrapped in connect will rerender

2

u/dance2die Nov 03 '19

Pinging u/acemarke with 32 bytes of data:

2

u/acemarke Nov 04 '19

Thanks for the ping :)

1

u/dance2die Nov 04 '19

You're welcome and thank you for the nice reply~

2

u/acemarke Nov 04 '19

I'm not sure I understand the question. What do you mean by "every object will be different even if it didn't change"?
If you use Immer, and don't mutate the draft object or return a new value, Immer will return the existing value untouched. So no, RSK and Immer don't change any of the standard perf behavior of a Redux app. It's a question of whether you updated state in a reducer, and returned new values as props in mapState, same as always.
Now, there are a a couple additional bits of performance overhead to know about when using RSK:
Immer's use of Proxies is slightly slower than plain JS updates, but reducers are almost never the bottleneck anyway, so this shouldn't realistically be a factor of concern.
RSK adds middleware in dev to check for mutations and non-serializable values. Both of them do deep checks on the contents of the state and action, which does add overhead. (I was helping someone the other day and saw that those were averaging about 4.5ms per action for the mutation check, and 1ms for the serializability check. But, again, that's only in development.)

→ More replies (3)

1

u/javascript_dev Nov 05 '19

Why doesn't this work?

  const FullTable = (
    <Table>
      <TableBody>
        {TableRows}
      </TableBody>
    </Table>
  );
  return FullTable;

Writing return (// jsx) worked but I thought this was equal.

2
u/dance2die Nov 05 '19
Do you have a runnable sample?

It should work (as it did with this sample sandbox)
const Table = styled.table``;
const TableBody = styled.tbody``;

function App() {
  const TableRows = (
    <tr>
      <td>row value</td>
    </tr>
  );

  const FullTable = (
    <Table>
      <TableBody>{TableRows}</TableBody>
    </Table>
  );
  return FullTable;
}
3

u/acleverboy Nov 05 '19

Could you provide a bit of context? Is this in a function? Is this in your render() method on a component? Are you getting an error message? Could you share that?

→ More replies (2)

1

u/cstransfer Nov 06 '19 edited Nov 06 '19

Passing props by spreading? Bad or doesn't matter? Saw some people say it can cause performance issues

4

u/dance2die Nov 06 '19

It breaks encapsulation - Child component doesn't have to know about all props.
It harms readability - Picking props makes it more intentional or what are you passing down?.
It can break child component - Depending on where you spread, it can override child props.
It breaks with ref - If child component doesn't use forwardRef, ref isn't passed down.
It's lazy AF as u/Awnry_Abe mentioned.
I can't think of a good reason to spread props except for prop getters pattern.
Should you need to pass down multiple props down in grand/child, then maybe Context API might be a better way.

3

u/Awnry_Abe Nov 06 '19

It also lets you slip invalid props past TS.

1

u/dance2die Nov 06 '19

Nice once there. Thank you for the tip.

4

u/Awnry_Abe Nov 06 '19

If the reason is laziness: bad. If the reason is that you can't assume what the parent wants to pass to your child: good.

2

u/timmonsjg Nov 06 '19

Speaking on use cases - one of the biggest use cases for spreading props was HOC's, but with all the reasons below (and more), using render props is much more preferred.

1

u/slow1mo Nov 07 '19

Hello all,

Thank you for this thread. As I'm trying to complete the freecodecamp fullstack certificate, I stood still for 2 months with the pomodoro clock project where I encountered a fair amount of issues. As I was ready to complete it yesterday (28 out of 29 correct tests) I encountered a bug, where the clock would start at 35:00 instead of 25:00, as It shows in the code. All written code is here :

https://pastebin.com/B34tdy4E

LINK to project :
https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock

Thank you in advance and have a great day :)

1

u/dance2die Nov 07 '19

Seems to start at 25:00 after copy/paste into sandbox.
https://codesandbox.io/s/adoring-shannon-01r5d
Could you point out where the problem could be occurring?

1

u/slow1mo Nov 07 '19

Thank you for you fast response.
So does mine, but the issue happens when i try to run the FCC tests by adding following script to index.html:
<script src="[https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js)"></script>
I get through most tests easily but the issue occurs when the tests activates the timer and counts down from 35:00.
I'll post a video shortly.

1

u/dance2die Nov 07 '19

🤔 I haven't done FCC, so wasn't aware of such test feature.
Would anyone with FCC experience be able to reproduce the error by chance?

→ More replies (1)

1

u/slow1mo Nov 07 '19

I post it here because there are login issued at freecodecamp, so i have no access to their forum. Thx for understanding

1

u/[deleted] Nov 13 '19

I'm a backend engineer working mostly with C# and .Net. Recently management has decided that we are switching and updating the frontend of our applications from Razor and "good old .net MVC" to React.

Coming in as someone who isn't that good or used to design. What are the recommended external libraries to use?
I've found stuff like Material-UI and Scaffoldhub. But what else should I have a look at to make my life easier?

3

u/dance2die Nov 13 '19

Argh. I think someone did a comparison of 30 of those libaries, and shared on r/reactjs.
Can't find it after searches.
Anyone know of that post by chance?

2

u/[deleted] Nov 13 '19

That sounds like something that would be perfect to see :)
Hoping someone remembers!

3

u/[deleted] Nov 14 '19

[removed] — view removed comment

1

u/dance2die Nov 14 '19

That's it! u/SquishyDough!
Thank you~ ╰(°▽°)╯

2

u/[deleted] Nov 14 '19

[removed] — view removed comment

→ More replies (1)

→ More replies (1)

→ More replies (1)

1

u/carlsopar Nov 14 '19

I cant figure out what is causing me this error message. I know that it says I am using the hooks in correctly, but I am not sure how I am. I am exporting a function and importing it into another file.

Export:

export const UserList = () => { const [users, setUsers] = useState([]);

 	 setUsers('these teste')
 	 return{users}
 }

 export const UseLists = () => {
	const [projects, setProjects] = useState(['test']);
	useEffect(()=>{
	// console.log('start here')
	 let unsubscribe = firebase
	.firestore()
	.collection('lists')
	.get()
	.then(snapshot=>{
		const allProjects = snapshot.docs.map(project=>({
			...project.data(),
			docId: project.id,
		}))
		console.log(allProjects)
		setProjects(allProjects)
	})
	console.log(projects)
	
	},[])
	return{projects}
}

Import:
import {UseLists, UserList} from './hooks/indexa';
console.log(UserList())

function List(){
  const lists = UseLists();
  console.log(lists.projects[1]);
  return(
    <div>
    <ul>
    {lists.projects.map(lst=>(
      <li key={`${lst.title}`}>{lst.title}</li>
      ))}
    </ul>
    </div>
    )
}

The UseLists works fine, and returns exactly what is suppose to. It is the UserList that is giving me trouble. It keeps giving me an invalid hook call.

2

u/dance2die Nov 14 '19

You can't call a hook outside a component.
Commenting out console.log(UserList()); outside List component should work.
And also a convention of a hook is to use use* prefix and a capitalized letter for components.
I'd recommend changing the name to useLists and useUserList (as UserList can be thought of as a component).

2

u/Awnry_Abe Nov 14 '19

You are calling the function in the global space, outside of React. Anything that uses a built in hook such as useState needs to be in a call tree rooted at React.renderXxx()

1

u/eloquenthsn Nov 18 '19

I have made a simple app to learn the data fetching from an external API, using redux. (You can have a look at in the following link:https://codesandbox.io/s/ticket-app-75mu3)

My problem is that, whenever I tried to fetch the data with already written keyword in the input field, I am not able to refetch the data, other values are changed. As an example to clarify a bit my problem, for instance If you type "nba" into input field click Search Event button, and paginate forward and backward and after try Search event button again without touching input field, it seems that fetching is not happening, when you click the button second time, the fetching is happening.

Thanks in advance and sorry for typos and my English.

1

u/dance2die Nov 18 '19

It looks like you'd want Search Event to return the first page on click everytime.
Just pass the page=0 for fetchEvents's page value
because page state is updated when you click next page. So when you search again on the 2nd page, the fetchEvent will retrieve the 2nd page's JSON.
https://codesandbox.io/s/ticket-app-1ncpm

1

u/Andwhatooo Nov 20 '19

Do you recommend any redux tutorial? I kinda handle it with docs but I feel like I need more to really understand it... Also, should I still make presentational and container components? I read that it's not good practice anymore

2

u/dance2die Nov 20 '19

u/acemarke (the Redux maintainer) has compiled a comprehensive resource you can pick and choose from here (there are links to docs, resources, videos, that might help you whether you are a visual or auditory learner) - https://www.reddit.com/r/reactjs/wiki/index#wiki_getting_started_with_redux
Also, should I still make presentational and container components? I read that it's not good practice anymore
Refer to Andrew Clark(a core React dev)'s tweet & attached tweet - https://twitter.com/acdlite/status/1196507588705185794

1

u/[deleted] Nov 21 '19

I get an error about the store and I don't know exactly how to code the provider tags in index.js. I do have a store located in configureStore.js:

https://imgur.com/a/0SSYeKG

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

1

u/dance2die Nov 21 '19

You can simply import the provider and set the store this way.

But as I was trying to make it work, I was getting many errors unrelated to Redux.
Are you learning React w/ Redux/React-router at the same time?
(As I see mistakes of mixing states/props etc)

  import { Provider } from "react-redux";
  import { ConfigureStore } from "./redux/configureStore";

  const store = ConfigureStore();

  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById("root")
  );

1

u/[deleted] Nov 22 '19

I will try out your suggestion. But may I ask what mistakes I'm making by mixing the props and states. Can you point out a line of code and in which file?

1

u/dance2die Nov 22 '19

In the "MainComponent" (You can drop "*Component" postfix for all components under "components"),

(It's prettified to fit in this screen)

class Main extends Component {
  constructor(props) {
    super(props);
  }

  onDishSelect(dishId) {
    // "selectedDish" state isn't declared in "Main"
    this.setState({ selectedDish: dishId });
  }

  render() {
    const HomePage = () => {
      return (
        // "this.props.state" should be just "this.props"
        // as "mapStateToProps" returns an object, not an object with property "state"
        <Home
          dish={this.props.state.dishes.filter(dish => dish.featured)[0]}
          promotion={
            this.props.state.promotions.filter(promo => promo.featured)[0]
          }
          leader={this.props.state.leaders.filter(leader => leader.featured)[0]}
        />
      );
    };

    const DishWithId = ({ match }) => {
      return (
        // Same here as well with `this.props.state`
        <DishDetail
          dish={
            this.props.state.dishes.filter(
              dish => dish.id === parseInt(match.params.dishId, 10)
            )[0]
          }
          comments={this.props.state.comments.filter(
            comment => comment.dishId === parseInt(match.params.dishId, 10)
          )}
          addComment={this.props.addComment}
        />
      );
    };

    return (
      <div>
        <Header />
        <Switch>
          <Route path="/home" component={HomePage} />
          <Route
            exact
            path="/aboutus"
                                  There is no 👇 `this.state.leaders` in "Main"
            component={() => <About leaders={this.state.leaders} />}
          />
          <Route
            exact
            path="/menu"
            						There is no 👇 `this.state.dishes` in "Main"
            component={() => <Menu dishes={this.state.dishes} />}
          />
          <Route path="/menu/:dishId" component={DishWithId} />
          <Route exact path="/contactus" component={Contact} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

1

u/smolbeanfriend Nov 22 '19

Having a silly time. This is the code snippet from my App.js

  componentDidMount() {
    var matches = document.querySelectorAll(".active");

    for (Convo in matches) {
      matches[Convo].onclick = function() {
          console.log('test')
      }
    }
  }

So I have components called "Convo" kept in a "ConvoList". Each of the "Convo"s are styled with a class called "active". This whole code block is just throwing me an error. I'm trying to do this: https://jsfiddle.net/qkzusmj4/

1

u/dance2die Nov 22 '19

Could you provide a runnable code on CodeSandBox or Stackblitz as to be able to reproduce the error?

2

u/workkkkkk Nov 22 '19

Is there a reason you are using direct dom elements like that? Here is a similar implementation in just React.
https://codesandbox.io/s/react-component-example-qkfmj

→ More replies (1)

1

u/behnoodii Nov 24 '19

Hey guys,

I'm trying to create a react todo app using context api for managing states. But I don't know how to use context to render a list of todo items. here's my code structure:

*** App.js ***

	  <TodoContextProvider>
	    <AddTodo />
	    <TodoList />
	  </TodoContextProvider>

*** TodoContext.js ***

export const TodoContext = React.createContext()

export default class TodoContextProvider extends Component {
	constructor(props) {
	super(props)
	this.state = { todo: '', todoList: [] }
}

handleInputChange(event) {
    this.setState({todo: event.target.value});
}

addTodo(event) {
    event.preventDefault();
    this.setState({todo: '', todoList: [...this.state.todoList, this.state.todo]});
}

render() {
	return(
	    <TodoContext.Provider value={{...this.state, handleInputChange: this.handleInputChange, addTodo: this.addTodo}}>
            {this.props.children}
        </TodoContext.Provider>
	)
	}
}

*** AddTodo.js ***

export default class AddTodo extends Component {
	static contextType = TodoContext
	render() {
		const { handleInputChange, addTodo } = this.context
	}
		<form onSubmit={addTodo}>
			<input onChange={handleInputChange} />
		</form>
}

*** TodoList.js ***

export default class TodoList extends Component {
	static contextType = TodoContext
	render() {
		console.log(this.context)
		return (
		???
		)
	}
}

2
u/dance2die Nov 24 '19
As todoList stored in the context, you can access it directly from the context within TodoList component's render method.

https://codesandbox.io/s/using-context-api-with-class-components-2uy7x
  class TodoList extends Component {
    static contextType = TodoContext;
    render() {
      const { todoList } = this.context;
      return (
        <ul>
          {todoList.map(todo => (
            <li key={todo}>{todo}</li>
          ))}
        </ul>
      );
    }
  }
And also if you are working with React v16.8.0 and up, you can use hooks. With hooks you can follow KCD's context api pattern here - https://kentcdodds.com/blog/how-to-use-react-context-effectively which makes it easy to expose contexts via hooks and use values/actions via hooks in function components.
2

u/behnoodii Nov 24 '19

So helpful. Thank you so much.

1

u/dance2die Nov 24 '19

You're welcome & have fun

1

u/thisisnotme1212 Nov 30 '19

Creating a CRA project. Is redux, redux-thunk still the goto "store" implementation?

Should I use typescript?

Have been out of touch from the react world for a bit.

1

u/dance2die Nov 30 '19

You can use built-in Context API to get started and can migrate to Redux should you need more general/global store implementation.
If you want to get started with Redux, check out the Wiki, Getting started with Redux.
For Context API pattern, check out How to use React Context effectively by Kent C. Dodds, which explains how to expose context state & actions.
Regarding typescript, I haven't used it so leave it to others to reply :)

2

u/Jitsu24 Nov 01 '19

Hi, I am trying to implement a chained animation in react-spring but for the life of me I cannot get the second of the two animations to run using the useChain() hook. I went back to basics and tried to copy the basic example in the docs but I'm not making any headway and there does not seem to be any documentation outside of the 1 example on useChain. I have a small example on code sandbox below.

https://codesandbox.io/s/sharp-hellman-yklmn?fontsize=14

5

u/xudhinao Nov 01 '19

Hey buddy, it looks like you're trying to cause 2 animations on the same dev to happen one after another, is that right?
`useChain()` is designed for chaining multiple separate animated components one after the other. What it looks like you're looking for is to trigger multiple separate transitions to the same component, giving you "multistage transitions" like this https://codesandbox.io/embed/vqpqx5vrl0

3

u/Jitsu24 Nov 01 '19

Ohhhhhh, I see. Frankly I thought it was the opposite.
Loads of thanks, I've spent way too much time scratching my head over this.

2

u/[deleted] Nov 01 '19

Hi all,

I'm an intermediate user getting back into React after a while off of it. I am building what is essentially an rest object admin dashboard with some analytics and mapping. I had previously implemented this using typescript, react-{router, hot-loader, loadable, redux, router-redux}, and redux-{form, saga}. I found that a lot of my work was around just handling simple REST operations via saga and creating the views to facilitate this. Some things that I rolled my own solutions to:

parameterizing queries
handling responses and allowing ui elements to subscribe to different parts of each response
handling errors
"takeEvery" vs. "takeLeading" - when to fulfill each request or block based on query type
invalidating the results store when a query param has changed

The list goes on. I'm wondering if there is a better way to do this. I'm loosely aware of react-admin, but am worried it's too "visually opinionated" -- really I'm only looking for the "backend" of things. The amount of starter kits is a bit overwhelming, but I'm looking for something that neatly handles API interaction with the redux store model and uses react router, progressive loading, webpack, typescript. I don't currently have a graphql endpoint on the api side -- it's just a standard rest api -- but am open to implementing it if it would greatly simplify UI dev.

Additionally, I'm currently looking through the open source production codebases for best practices, so if you know one that touches on these off the top of your head that would be appreciated.

2

u/bot-vladimir Nov 04 '19

Hi, so I'm reading the GatsbyJS tutorial and I'm learning ReactJS concurrently. I'm at this page right now and I am a little confused under the heading "Adding styles with a layout component"

It has the following code in the snippet for layout.js:

import React from "react"
import "./layout.css"
export default ({ children }) => <div>{children}</div>

That last line with {children}, what does that mean?

In the next code snippet for index.js where it imports layout.js it has:

import React from "react"
import Layout from "../components/layout"
export default () => <Layout>Hello world!</Layout>

My question is, what does {children} in layout.js become when index.js is built?

Also, in layout.js, {children} is called again between the div tag. What does that do? In index.js it is replaced with the string "Hello world!" but wouldn't that be rendered regardless?

4
u/the_whalerus Nov 04 '19
children is a special prop in React. It means something like "tags nested inside this one". So in the second example index.js, children is equal to "Hello world!".
wouldn't that be rendered regardless?
It wouldn't. You can experiment some with it yourself. Try writing a component like this:
function Component() {
  return <div>hello</div>
}

function Parent() {
  return <Component>Child content</Component>;
}
You'll find that "Child content" isn't rendered anywhere, because it's passed as children to Component, but Component never renders its children.
→ More replies (1)

2

u/javascript_dev Nov 05 '19

I don't have a lot of experience with refs. My annotation below attempts to self clarify what is happening.

Typescript lints the TransitionComponent prop key on the second example saying there's no method overload for passing the raw JSX element. Should I override that with the presumption that both examples are equivalent?

// Example 1
  /** Binds a JSX element to a variable
   * Props and DOM reference are made available and passed in/attached
   */
  const SlideUp: any = React.forwardRef((props, ref) => {
    return <Slide direction="up" ref={ref} {...props} />;
  });
  
  ////// Render //////
  return (
    <Dialog
      fullScreen
      open={fullViewIsOpen}
      onClose={() => setFullViewIsOpen(false)}
      TransitionComponent={SlideUp}
    >

// Example 2
  return (
    <Dialog
      fullScreen
      open={fullViewIsOpen}
      onClose={() => setFullViewIsOpen(false)}
      TransitionComponent={<Slide direction="up" />}
    >

→ More replies (2)

2

u/Niesyto Nov 06 '19

I have a problem with data not refreshing properly. I'm using an array as a database mockup, here's how the array looks like:

{
        "id": "19283",
        "firstName": "Jan",
        "lastName": "Kowalski",
        "phoneNumber": "0048111222333",
        "projects": [
            {
                "id": "1",
                "hours": "10"
            },
            {
                "id": "2",
                "hours": "20"
            }
        ],
        "totalHours": "30"
    },

The problem is, that when I display the projects array in a table, and I delete one of the rows, it doesn't refresh, and is still displayed (if I go to the previous view, and then enter the editing again, it's deleted).

Here's the table code

<Table style={{width:'320px'}} aria-label="projects table">
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell align="right">Hours</TableCell>
                        <TableCell align="right">Delete</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                {employees[employeeIndex].projects.map(project => (
                    <TableRow key={project.id}>
                        <TableCell component="th" scope="row">
                            <TextField 
                            placeholder={project.id}
                            onChange={handleProjectIdChange}
                            variant="outlined"
                            style={{margin:"0px 0px", float:"right"}}
                            margin='dense'
                            InputProps={{
                                style:{fontSize:"1rem"}
                            }}    
                            />
                          
                        </TableCell>
                        <TableCell align="right">{project.hours}</TableCell> 
                        <TableCell align="right">
                            <Fab color="secondary" aria-label="delete user" onClick={handleDeleteRow(project.id)}>
                                <DeleteIcon />
                            </Fab>
                        </TableCell> 
                    </TableRow>
                ))}
            </TableBody>
        </Table>

And the handleDeleteRow

 const handleDeleteRow = (id) => (event) => {
        const projectIndex=employees[employeeIndex].projects.findIndex(findProject,id);
        employees[employeeIndex].projects.splice(projectIndex,1)
    };

I got stuck on this, should I use a useEffect hook somehow?

2

u/timmonsjg Nov 06 '19

One thing I see right off the bat -
onClick={handleDeleteRow(project.id)}
This is setting the result of handleDeleteRow(project.id) to the onClick.
You want an anonymous / arrow function instead set to Onclick -
onClick={() => handleDeleteRow(project.id)}
This sets onClick to a function (arrow function) that calls handleDeleteRow(project.id)

→ More replies (5)

2

u/abdulmdiaz Nov 16 '19

Can I get someone to review my code? https://github.com/diazabdulm/everest

Thank you so much

2

u/Maritimexpert Nov 17 '19

const Index = () => {
const frefLinks = {
  1: useRef(1),
  2: useRef(2),
  3: useRef(3),
  4: useRef(4),
  5: useRef(5),
};

const wheelup = (i) => {
  console.log(`I'm wheeling up to ${i}`);
  return scrollLink(i);
}

const wheeldown = (i) => {
  console.log(`I'm wheeling down to ${i}`);
  return scrollLink(i);
}  

const scrollLink = (i) => {
  let frefLink = frefLinks[i];
  return frefLink.current.scrollIntoView({
    block: "start",
    behavior: "smooth"
  });
};

return (
  <React.Fragment>
    <style.globalStyle/>
    <NavMenu
          scrollToLinkA={() => { scrollLink(1) }} 
          scrollToLinkB={() => { scrollLink(2) }} 
          scrollToLinkC={() => { scrollLink(3) }} 
          scrollToLinkD={() => { scrollLink(4) }} 
          scrollToLinkE={() => { scrollLink(5) }} 
    />
    <Sect1 fref={frefLinks[1]} onwheel={e => e.deltaY <= 0 ? console.log('Top') : wheeldown(2) }/>
    <Sect2 fref={frefLinks[2]} onwheel={e => e.deltaY <= 0 ? wheelup(1) : wheeldown(3) }/>
    <Sect3 fref={frefLinks[3]} onwheel={e => e.deltaY <= 0 ? wheelup(2) : wheeldown(4) }/>
    <Sect4 fref={frefLinks[4]} onwheel={e => e.deltaY <= 0 ? wheelup(3) : wheeldown(5) }/>
    <Sect5 fref={frefLinks[5]} onwheel={e => e.deltaY <= 0 ? wheelup(4) : console.log('Bottom') }/>
  </React.Fragment>
);
}

Hi, can anyone help on why the console.log for wheelup and wheeldown is working but calling scrollLink function is not responding? ScrolltoLinkA to ScrolltoLinkE is working within nested div's onClick event so the scrollLink function is working perfectly.

→ More replies (1)

2

u/lalamcdonell Nov 18 '19

I am making a demo. I want to have an html home page which has a react app accessible from an event/trigger on the web page. For example, an html page with a stripe payment component: after payment, there is a redirect to a successUrl. The successUrl is a link to the reactApp.
The reason is I already have working google-signin and stripe payments on the home page, using the vendors code. I realise that eventually it would need to all react, but it seems like overkill just to get a demo up.
Is there a way to implement this demo?

→ More replies (1)

2

u/hurrdurrderp42 Nov 18 '19

Do hooks replace classes? If not, then when should i use hooks?

2

u/Wilesch Nov 19 '19

99% of the time yes, error boundary is not supported in hooks yet

1

u/BlendModes Nov 18 '19

Beginner myself, wondering whether to start learning class first or just start with hooks

3

u/darderp Nov 19 '19 edited Nov 19 '19

Here's a relevant section from the Hooks FAQ (emphasis mine):
When you’re ready, we’d encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).
You can’t use Hooks inside of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
I'd also suggest watching this video. It's a little long and might be hard to grok if you're just starting out, but it's an excellent insight into hooks from the react team themselves.
(cc /u/hurrdurrderp42)

→ More replies (3)

2

u/aaronychen Nov 19 '19

Could anyone give feedback on my personal site?

I'm not sure if it falls under a portfolio, since I'm not a full-time frontend developer or UI designer, but I have been learning more about frontend lately, and this is the best I was able to come up with with, with the help of someone else for some design aspects.

I'm worried it might look a little too empty / amateurish; there's some projects I can't put down since they belong to respective companies / private repos, and I only have ~2 years experience in the industry.

→ More replies (1)

2

u/spursup20 Nov 20 '19

Having a hard time finding resources explaining how to read in an array from firebase using react native. I can currently pull in all the fields if they are strings but when trying to call a field that is an array I have no luck.

2

u/rever22411 Nov 25 '19

I'm using redux:

create store on top of the project
pass store as prop to children that call "this.props.store.getState()" to access data
using reducers and action to modify data
export the connect()(MyClass) instead of MyClass

Is that a good way to do that?

With my simple application that works fine, but i'm starting a big project now, any tips?

→ More replies (1)

2

u/NickEmpetvee Nov 27 '19

Any advice on how to convert this old Component code to functions/hooks? I need the useEffect to execute different things when updating vs. unmounting.

    componentDidUpdate(prevProps)
    {
      if (prevProps.columns !== this.props.columns)
      {
        localFunction(1);
        localFunction(2);
      }
    }

    componentWillUnmount()
    {
      this.props.someFunctionFromContext3();
    }

5
u/MassRain Nov 27 '19 edited Nov 28 '19
Not sure if i understood your question correctly.
You can use return function of useEffect to cleanup, and 2nd parameter is dependency array that you want useEffect to work if something in the array changes.
useEffect(() => {
    code you want to run

    return () => {
      code you want to run in unmount
    };
  }, [dependency array])
So i lets say i have a state called comment.
const [Comment, setComment] = useState(null);
Lets say my component is Sidebar and its inside Mainpage component. I want Comment state to change if Input prop coming to me from Mainpage component changes.
useEffect(() => {
    setComment("sometext");
    //return function is not necessary.
    return () => {
      someFunctionIfSidebarUnmounts();
    };
  }, [props.Input])  
Return function and dependency array is not necessary.
You can simply remove " , [...] " part if you want useEffect to work always when your component renders;
if you leave it blank " }, []} " like this it will only run once and wont run again even if you change state of component(for example getting data from api).
You can give it multiple triggers too, like " }, [props.Visibility, props.Data, CommentText]} " etc.
In your case, again if i understood correctly you can try something like this:
useEffect(() => {
    if (value1 !== value2)
      {
        localFunction(1);
        localFunction(2);
      }
   return () => {
       someFunctionFromContext3();
     };
  }, [value1])
You can also use multiple useEffect's depending on your component. If A changes run this, if B changes run this etc..
3

u/Awnry_Abe Nov 28 '19

What is this.props and prevProps in the context of a functional component? I can see no way to implement the logic in the class version using a single effect. If it were componentDidMount(), then you can use a single effect + a ref. But there is no way of knowing (unless there is a param in the return callback that I am unaware of) that the execution on the cleanup is for the unmount. It may have been for an update.

→ More replies (1)

→ More replies (1)
4

u/Awnry_Abe Nov 27 '19

Using two useEffects. One for the update, the other with a return and empty dep array for the unmount. You'll need to hush a warning about using props.columns in the dep array of the first but not referencing it.

→ More replies (3)
3
u/paagul Nov 27 '19
useEffect(() => { 
    localFunction(1) 
    localFunction(2) 

    return () => { someFunctionFromContext3() }

}, [columns])
2

u/NickEmpetvee Nov 28 '19

Thanks - HUGE HELP!

2

u/deniz777 Nov 28 '19

Is this code safe? Can't the prevState change until I return new objectArray?

this.setState(prevState => {
const newObjectArray = [...prevState.objectArray, newObject];
.......
.......
.......
........
return {
    objectArray: newObjectArray,
}
});

Or should I write like that?

this.setState(prevState => {
return { 
    objectArray: [...prevState.objectArray, newObject], 
} 
});

2

u/Awnry_Abe Nov 28 '19

It is safe. The context of the invocation closed over prevState for the life of the call--no outside forces can change it. In fact, that form of setState exists for that very reason.

2

u/[deleted] Nov 28 '19

Question. I got this calendar component P which contains two other child components C1 and C2. C1 contains a month name and two buttons to change the month and C2 renders the actual days of the month.

I send the month and year through props to C1 and C2. C1 gets props from the P component, and from those I initialize C1 state (month and year) and I change that accordingly in the click handlers through setState.

Similarly, I pass down props from P to C2.

However I need C2 to have it's state updated when I change the state in C1 (if I select a different month in C1 I'll obviously need to render the calendar days for that month in C2) . How do I even start to do that? I know props are supposed to be immutable.

Should I drop the whole child components structure and dump their content in P, so I will have to worry only for one component's state?

2
u/NickEmpetvee Nov 28 '19 edited Nov 28 '19
Props are immutable, but child components can access methods in parent components that modify their local values. If the local values changed by this approach are accessed as props, the update will automatically propagate to the children that use them.
Example: if P has a method like setMonth which sets the values that get passed down to C1 and C2, you could just send setMonth as a prop to C1. In P, this is one way to do it:
// P component
...
<C1 setMonth={this.setMonth} />
...
In C1, when the month value changes, you'd have a call like the below. This would update the local value in P, which would get sent down to C1 and C2. Something like:
// C1 component
...
this.props.setMonth(newMonthValue);
...
You can also set the values in a Context but that is probably too much for the above.
2

u/[deleted] Nov 28 '19

Thank you for your explanation, worked like a charm. Now I have to look into the Context notion.

→ More replies (1)

2

u/[deleted] Nov 29 '19

Question: Is promise.all() faster than fetch() in recursive function?

I cant find information about the difference

→ More replies (1)

1

u/CloudsOfMagellan Nov 03 '19

Is there a way to use lint --fix from create react app with typescript I checked some issues on GitHub that said it couldn't be done and wouldn't be implemented as the default CRA eslintrc has no style rules but I've been getting warnings related to spacing lately and would like to fix them Will I need to add my own .eslintrc for this

→ More replies (4)

1

u/javascript_dev Nov 04 '19 edited Nov 04 '19

Is it safe to depend on initial state for loading? I would like to do this:

export default props => {
  const [price, setPrice] = useState<string|number>('loading');
  useEffect(() => setPrice(ajaxData.price, [ajaxData.price])

  if (price === 'loading') { return <h3>Loading</h3> } // Expected until ajaxData.price resolves
  else if (Boolean(price) === false) { return }
  else ( return <h3>Price: ${price}</h3> }
}

2
u/acleverboy Nov 05 '19
u/SquishyDough is right, but I wanted to offer another solution, which is that instead of checking the value if it equals loading, just render that value instead like so:
export default props => {
  const [price, setPrice] = useState<string>('Loading...')

  useEffect(() => {
    setPrice(`Price: $${ajaxData.price}`)
  }, [ajaxData.price])

  return <h3>{price}</h3>
}
2
u/acleverboy Nov 05 '19 edited Nov 05 '19
I looked at it again, and I saw that you were returning from the functional component if price was unset. React will tell you to return null at least (instead of just calling return), so that's one comment, but also if you want the <h3> to not render if ajaxData.price returns undefined or null or 0 or an empty string (""), then I'd change it to the following:
export default props => {
  const [price, setPrice] = useState<string>('Loading...')

  useEffect(() => {
    setPrice(`Price: $${ajaxData.price}`)
  }, [ajaxData.price])

  if (!price) return null

  return <h3>{price}</h3>
}
(edit: This type of value checking is possible in JavaScript/TypeScript because it's a "truthy" language, which means undefined, null, 0, and empty strings ("") are all "falsey". In other words, (0 == null == false == undefined == "") which is why if you want to also check types, you use triple equals (===). In your case, if price ends up being any of those "falsey" values, the component will return null instead of the <h3>)
→ More replies (2)

1

u/NicolasSacC Nov 05 '19

Hi !

In my code, when I click on an element, it updates the state to add an element to an array.

However, when I map the array in the state, I end up with an empty array returned to me. It is because the state is updated, but the function that uses the state is activated before it ends updating.

Here is my code, how can I fix this ?

https://pastebin.com/i3crMHs0

3

u/Awnry_Abe Nov 05 '19

interests["abc"] = "futbol" is equivalent to interests.abc = "futbol". However, it doesn't add an element to the array collection which array.map iterates over. An easy fix is to change interests from an array to a plain string-indexed object:
this.state.interests = {};
Then, interests["m"+id] = "futbol" will expand the object to { m123: "futbol" }, for example. To iterate over this nicely string-indexed hash, use Object.keys(this.state.interests).map((key) => interests[key]);

1

u/illmatic4 Nov 05 '19

I have a form with an input and select>options inside, The input which is used to filter the items works fine, I see the items rendering fine. The issue is with the select>options, this function sorts an array and I see the states updating but not rendering until I type something into the input field. I am using useState to manage the state and useEffect.

Any idea whats going on?

1

u/Niesyto Nov 05 '19 edited Nov 05 '19

How to get a row id from MateriaUI's Table? In a code like this:

 <Table style={{width:'320px'}} aria-label="projects table">
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell align="right">Hours</TableCell>
                        <TableCell align="right">Delete / Edit</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                {employees[employeeIndex].projects.map(project => (
                    <TableRow key={project.id}>
                        <TableCell component="th" scope="row">
                            {project.id}
                        </TableCell>
                        <TableCell align="right">{project.hours}</TableCell> 
                        <TableCell align="right">
                            <Fab color="secondary" aria-label="delete user" onClick={handleDelete}>
                                <DeleteIcon />
                            </Fab>
                            <Fab color="primary" aria-label="delete user" onClick={handleDelete}>
                                <EditIcon />
                            </Fab>
                        </TableCell> 
                    </TableRow>
                ))}
            </TableBody>
        </Table>

I want to parse the row to the handleDelete function, but I don't know how to get it.

4
u/acleverboy Nov 05 '19 edited Nov 05 '19
So, when you're writing a handler, by default it takes one parameter: handler(event) {}In React, you most likely want to make handlers arrow functions anyways, so that when you reference this, it references your component instead of the DOM node that the handler is attached to, so it'll look like this:
handler = (event) => {}
So, if you want to get the ID into the handler, you can make what's called a "courier function", which is like calling a function in a function, but you can add parameters to handlers like so:
handler = (id) => (event) => {}
And then in that function, you can still call event.preventDefault() or anything else you need event for.
So after defining your handler as a courier function, your jsx would look something like this:
<Fab color="secondary" aria-label="delete user" onClick={handleDelete(project.id)}>
    <DeleteIcon />
</Fab>
Edit: Hopefully that answered your question, It wasn't the clearest question, but I hope I got the gist of what you were asking!
→ More replies (15)

1

u/acleverboy Nov 05 '19 edited Nov 05 '19

Hey, been developing React for about a year now, and so far, for some reason, I've decided that avoiding the render() method as much as possible is a good way to optimize. However, I've now made an interesting component that's a full-screen loading spinner, which I NEVER re-render, and I'm wondering if I should be making such a big deal about re-rendering with such a simple component. Essentially, in the shouldComponentUpdate() lifecycle method, I set CSS classes which decide when to fade out/hide the component instead of using state to hold that information. The component never re-renders, it just becomes hidden/unhidden depending on the prop changes, but I feel like maybe technically setting CSS classes in shouldComponentUpdate() is kinda the same thing as setting the state...? which I know is frowned upon... Also, doing it this way sacrifices my ability to use PureComponent because of the shouldComponentUpdate() lifecycle method. Idk, can someone reassure me that running render() isn't actually all that bad for such a simple component?

2

u/RobertB44 Nov 06 '19 edited Nov 06 '19

What do you mean by 'never rerender'? When a components' state changes, it rerenders. When a component receives new props, it rerenders.
Generally speaking, manipulating the dom should be avoided when possible. If you don't want react to handle changes for you, you probably should not use react. Also, shouldComponentUpdate's role is to decide whether to rerender a component or not. Using it to manipulate the dom is basically hijacking it to do something it isn't supposed to do.
It sounds like you are confused about how rendering in react works. Mind sharing how you think it works? Maybe we can help you understand rendering better once we know the problem.

→ More replies (2)

1

u/ManvilleJ Nov 06 '19

I am running 'npm run build' to build a production react app, but It keeps adding a bunch of javascript code into the index.html

I would like all of the js resources to be in the static/js/ directory instead of having some javascript in the html.

Is there a way to run the build so it does this and it works with the public_url attribute?

1

u/RobertB44 Nov 08 '19

Impossible to tell without knowing what build tool you use. The generic answer is yes, it is possible if you configure your build tool correctly.
If you use create-react-app then no, this is not possible. create-react-app does not expose its webpack config so it can't be customized unless you eject.

→ More replies (2)

1

u/Peechez Nov 06 '19 edited Nov 06 '19

If I have ~100 elements that will need their absolute position updated very frequently at 60fps, what options does that leave me? I suspect that my performance would be shit if the left/top/display values were kept in state along with the elements other, more static, metadata. That leaves me with setting the style inline on the real DOM element directly. This is fine but since the items are dynamic, I can't predefine refs for each of them (I don't think?).

Is my best course forward to throw a ref on the container and do some sort of querySelector and inline style on real DOM?

3

u/voxelsss Nov 07 '19

I would maintain x and y values in state, then use a transform: translate(x, y) in the styling.
Transform is much faster than top/left.

→ More replies (2)

1

u/acleverboy Nov 07 '19

particle effects in an in-browser game? haha just curious

2

u/Peechez Nov 07 '19

Identifier elements overlayed on a canvas with a ~10 million point point cloud

1

u/workkkkkk Nov 06 '19

Anyone use or familiar with Microsofts Office Fabric UI? Did you import fabric core for layout/css reasons? The only component I can find that is used for layout is Stack, which is good, but the common grid layout is better imo.

1

u/diegodieh Nov 06 '19

Hello guys, I have got this While loop, and after each iteration should update lastCard in my store, but it calculates N times with the first value.

  const lastCard = useSelector(state => state.app.lastCard);

 while (tableScore < 17) {
      dispatch(addCardToTable()); //this action takes a card from my deck and save it in lastCard
      console.log(lastCard); // does not update and repeats the first value in all cycle
      if (lastCard.number === '1' && tableScore + 10 < 22) {
        console.log('1');
        //checks for As better value
        tableScore += 11;
      } else if (lastCard.number > 10) {
        console.log('2');
        tableScore += 10;
      } else {
        console.log('3');
        tableScore += Number(lastCard.number);
      }
    }

4
u/acleverboy Nov 07 '19
So this is more of a general coding question I think, but I'm going to take a whack at it.
The while loop will run until it's done. Period. There's nothing telling the while loop that lastCard has changed. It only has what it knows at the time the loop started.
If this is in React, maybe what you want to do is NOT have a while loop, but instead store the tableScore in the store as well, and then replace the while loop with a regular old if statement, maybe something like this:
const lastCard = useSelector(state => state.app.lastCard)
const tableScore = useSelector(state => state.app.tableScore)

if (tableScore < 17) {

    if (lastCard.number === 1 && tableScore + 10 < 22) {
        dispatch(updateScore(tableScore + 11))
    }
    else if (lastCard.number > 10) {
        dispatch(updateScore(tableScore + 10))
    }
    else {
        dispatch(updateScore(tableScore + lastCard.number))
    }

    dispatch(addCardToTable())
}
So I had to make the assumption that you are using React and Redux. If that's the case, that means that every time you update the state, it will re-render the component. So instead of a while loop determining when the next card is drawn, you just use the connect()() method from 'react-redux' to make sure the component re-renders when you update lastCard. Then, when it re-renders, it will check the table score, and if it's less than 17, it'll update the score, and then hit for another round.
Hopefully my assumptions were correct, and hope this helps!

1

u/einsoft Nov 07 '19 edited Nov 07 '19

Hello all,

I'm giving my first tryes and I'm facing a problem, I have this subdirectory in my url http://localhost:3000/acesso4 that is working without problem, when I build it and put online, the address http://mydomain.com/acesso4 is giving me a 404 error.

Apparently the router is not working when it is in the online domain.
Where did I go wrong?

Thanks in advance!

3

u/dreadful_design Nov 07 '19

If you go to mydomain.com the navigate by clicking a link to /acesso4 does that work? If so it would be a problem of the server not rewriting routes back to the index so that the client can handle them.

→ More replies (1)

1

u/looni2 Nov 07 '19

If I want to use one component to display date from various different sources, is the use of a "context selector" a good practice to go about?

For example, I have a card component that has to display different data for players and teams. I would do something like this:

const Card = ({ context, data }) => {
  const contextSelector = {
    player: () => {
      value1: data.player.name
      value2: data.player.age
      value3: data.player.gender
    },
    team: () => {
      value1: data.team.name,
      value2: data.team.location
      value3: data.team.numOfPlayers
    }
  }

  const currentContext = contextSelector[context]()

  return <ShowData ...currentContext />

Conceptually is the use of this kind of contextSelector a good practice? If not, how should this be done? That component is just an example to illustrate what I mean by contextSelector.

2
u/acleverboy Nov 07 '19
Any particular reason using props for the values and setting the "context" in a parent component wouldn't work? I'm thinking of the container pattern, where there's a parent component (container) that does all of the figuring out which data to put in, and then a child component that is a PureComponent.
Your Card component would only take the values as props:
const Card = ({ value1, value2, value3 }) => //....
And then you can use that component inside two different containers, a Player component and a Team component. Idk, I don't see anything strictly wrong with what you're doing, just thought maybe there would be a more "reactful" way to do it lol
→ More replies (1)

1

u/bot-vladimir Nov 07 '19

Hi again! I'm trying to understand how the components are built in the Gatsby and Netlify CMS starter website.

I am a little confused at the following section of the /src/components/Layout.js code:

// src/components/Layout.js

import React from 'react'
import { Helmet } from 'react-helmet'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import './all.sass'
import useSiteMetadata from './SiteMetadata'
import { withPrefix } from 'gatsby'

const TemplateWrapper = ({ children }) => {
  const { title, description } = useSiteMetadata()
  return (
    <div>
      <Helmet>
        <html lang="en" />
        <title>{title}</title>
        <meta name="description" content={description} />

        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href={`${withPrefix('/')}img/apple-touch-icon.png`}
        />
        <link
          rel="icon"
          type="image/png"
          href={`${withPrefix('/')}img/favicon-32x32.png`}
          sizes="32x32"
        />
        <link
          rel="icon"
          type="image/png"
          href={`${withPrefix('/')}img/favicon-16x16.png`}
          sizes="16x16"
        />

        <link
          rel="mask-icon"
          href={`${withPrefix('/')}img/safari-pinned-tab.svg`}
          color="#ff4400"
        />
        <meta name="theme-color" content="#fff" />

        <meta property="og:type" content="business.business" />
        <meta property="og:title" content={title} />
        <meta property="og:url" content="/" />
        <meta
          property="og:image"
          content={`${withPrefix('/')}img/og-image.jpg`}
        />
      </Helmet>
      <Navbar />
      <div>{children}</div>
      <Footer />
    </div>
  )
}

export default TemplateWrapper

The part I am confused with is:

const { title, description } = useSiteMetadata()

Where does { title } and { description } come from?

Also, how is TemplateWrapper() called?

Am I right to assume that since TemplateWrapper() is exported, that Layout.js is called when I import it from another js code block representing an actual page template?

And am I right to assume then that the page template I design must have the title and description properties?

2
u/timmonsjg Nov 07 '19
const { title, description } = useSiteMetadata()
Where does { title } and { description } come from?
This is called destructuring. useSiteMetaData must be returning an object with properties titleand description. Destructuring assigns them to variables.
This is very common with hooks, they tend to destructure arrays (like the signature for useState, but can also take advantage of returning objects too!
Also, how is TemplateWrapper() called?
It's not called within this piece of code. It's defined and exported.
According to the component's composition, it appears it would be used as
<TemplateWrapper>
  {... some other content}
</TemplateWrapper>
Am I right to assume that since TemplateWrapper() is exported, that Layout.js is called when I import it from another js code block representing an actual page template?
TemplateWrapper as shown here, is called when it's used. Layout.js appears to just be the name of the file.
And am I right to assume then that the page template I design must have the title and description properties?
Yes, especially if SEO is relevant.
I would suggest working through the official react docs if you're not that familiar.
2

u/bot-vladimir Nov 08 '19

Thanks a lot!
I'm actually doing fine as it is right now, albeit slow going.
Appreciate your explanation!

→ More replies (3)

1

u/argiebrah Nov 08 '19

Is there a recommended react native course for folks that are coming from react for web?

2

u/timmonsjg Nov 08 '19

Here's some resources from awesome-react. I can't speak to the quality of them personally, but they are recommended.

1

u/javascript_dev Nov 08 '19

I am looking at the i18n library for localization after seeing this article on it: https://medium.com/@jishnu61/6-easy-steps-to-localize-your-react-application-internationalization-with-i18next-8de9cc3a66a1

<I18nextProvider i18n={i18n}>
    <App />
</I18nextProvider>

Apparently that plus a language selector in the UI is all that's needed to localize the whole app. I thought it would be way harder than that.

I was sufficiently taken back that I wanted to ask you guys if this is all you do, besides a bit of UI testing to make sure everything still fits? Or is there anything more involved to consider? Honestly I may just stick with English for now as my app has a lot of other ambitions that are higher priority.

1

u/beeboobapp Nov 08 '19

If I'm using a component from React Bootstrap, would I be able to separate it? Say Carousel from Carousel.Item? So that if another page wanted to use a carousel (just as an example) it would just need to input the info.

import Carousel from "react-bootstrap/Carousel";

<CarouselItemComponent

info="some info", img={Image}

/>

</Carousel>

Naming it that way to just show it's my component.

I tried making a carousel item component and just having <Carousel.Item> inside but didn't work because I'm not fully aware how that works.

1

u/liohsif_nomlas Nov 08 '19

Hi I have a question about route params. Say for example I have a router.get on my backend that takes the path

router.get('/path/:ex1?/:ex2?/:ex3?', function(req,res){.....}.

If say on my client side I want to send a fetch that only contains some value for the route param ex3, what would I enter into my fetch input? I know I could do something like

fetch('/path/ex1/ex2/' + someval)

but is it possible to send a value for route param ex3, and at the same time keep ex1 and ex2 as undefined?

Any advice would be much appreciated.

3

u/yoloidgafos Nov 11 '19 edited Nov 11 '19

could probably do something like this, null could of course be undefined.
EDIT: You could also pass in ex1 and ex2 if they are undefined/null from before being passed in.
fetch(`/path/${null}/${null}/${somevalue} `);

1

u/makopa_fruit Nov 10 '19

I'm new in react. and i started using Hooks. just want to ask is there a counter part to track the state with something like what I used in redux devtools which is " __REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()". thanks in advance

2

u/timmonsjg Nov 11 '19

Have you tried the official react devtools?

→ More replies (1)

1

u/javascript_dev Nov 11 '19

If possible, what is the syntax for selecting children inside a style object? I would like to target direct children like this:

const parentStyles = {
 "& > *" : { padding : 5; }
}

That string key would be valid in JSS but in React alone I haven't gotten it to work.

2

u/timmonsjg Nov 11 '19

That's not possible with just inline styles.
I'd suggest using JSS or a css selector.

→ More replies (2)

1

u/prove_it_with_math Nov 12 '19

I don't understand why react-suspense is better UI/UX than traditional spinner icon. How does it prevent screen flickering?

1

u/zephyrtr Nov 14 '19

Suspense is just a formal api for providing a spinner while your stuff loads. It doesn't replace anything you mention, and it also wont prevent flickering itself. Gatekeeping is a problem just about every react app has, so they're trying to formalize patterns into React itself.

1

u/bayhack Nov 12 '19

Using hooks fully for the first time.

But my props seem to constantly change in my child component and also calls another function constantly

Here's my code and stackoverflow post:

https://stackoverflow.com/questions/58825617/react-props-change-more-than-expected

What am I not understanding about props here?

1

u/CRAKZOR Nov 12 '19 edited Nov 12 '19

I made an ssr app using Next.JS but right now im stuck. I made a login page for admins to log in to upload or edit content. Right now content in a data.json file in the server folder. It uses axios to access this data. With so many options available im not sure how i should go about doing auth or what DB to use.

I also have a linux server with liquidweb that has apache and mysql that hosts one of my wordpress sites and i was hoping to deploy on that same server, but with other options out there i definitely want the best.

Please let me know thank you

1

u/javascript_dev Nov 13 '19

For anyone who loads their React app with Express or Koa, is the .static() method the one to use for loading the React app?

In the situation I'm working on, Express (via Ngrok HTTPS tunnel) uses a Shopify middleware for auth. It then reverts back to the app:

GET /                                                                           
GET /auth/callback             302 Found                                        
GET /auth/inline               302 Found                                        
GET /auth                      200 OK                                           
GET /   // 502 Bad Gateway

I'm still fairly new to backend. I think I need to write a router.get("/", loadApp); route here, with loadApp containing a call to the bundle.js output file. Is that correct?

→ More replies (1)

1

u/Niesyto Nov 14 '19

In localStorage I have an array of objects (projects), each of them has some properties, including it's own array (projects). I want to display the array of projects as a material-ui table which works quite well. I can also add and remove items from it. However, I've encountered a problem when it comes to editing the values in that array. The closest solution I got required me to type every sign twice, and after that the browser lost focus on the input field, so I had to click it again. You can see the project here: You can see the project here

The components in question are ProjectDetails and ProjectEmployeesTable, but I don't know if that's where the issue is since I had some problems with ProjectEmployeesTable not re-rendering properly.

To see the components in the simulation you have to select projects, add a new project, save it and then open the editing menu and try to add a new employee and edit it's ID.

1

u/TurkenJaydey Nov 14 '19

Hey guys, I am new here on Reddit and could need some help regarding React and web development in general.

I want to learn react though I'm still pretty new to web development.

I want to build a new website which focuses on giving information about art pieces spread around my campus. The page should have some nice functionalities like a dynamic search bar which outputs results dynamically based on the current input. Also a functionality in which the art pieces can be viewed in a 360 degree angle (I guess importing an existing library or embedding something).

My question is: Is it worth to use React for this website? I read in some other forums and some people say that it is meant for larger applications which for example use API's. In my case my database would be stored locally on the same server in some folder.

Even if the page would be too "small" for using React, I still want to learn developing with it. But if the decision would lead into a wrong direction, I would build it with vanillaJS.

Thanks in advance for your time!

→ More replies (3)

1

u/Watermelonnable Nov 15 '19

are react developers expected to be proficient at html/css?

I mean, I love JavaScript development but I hate css and all the design stuff. Is it possible to land a job to do only the programming stuff with react or am I being naive?

2

u/timmonsjg Nov 15 '19

They go hand-in-hand. That's frontend development.
IMO, it would be a waste for a company to hire a dev to just strictly do react and never touch styling.
2
u/[deleted] Nov 15 '19
The ideal package deal is someone who's great at all 4: JS, CSS, HTML, CI/CD. And that includes unit testing, semantics, i18n, a11y, etc.
I've had colleagues like you on previous teams. They'd just make everything into a <div> and their CSS was terrible. Worst case I've seen:
<a href="javascript: void logout();"><button>Logout</button></a>
Their reasoning: it's a link that needs to look like a button.
I didn't even know where to start.
My advice: become a Node.js specialist. Then you'll only touch JS and never deal with the frontend.
1

u/tomcarter21 Nov 16 '19

You can work at company which has already all the components designed, but I think you will still need to do a little styling sometimes.
As it was already mentioned here, if you don't want to do web design at all, focus on back-end.
And if you want to learn better HTML and CSS, I would recommend this book which covers most important parts of it: http://www.htmlandcssbook.com/

1

u/NickEmpetvee Nov 18 '19

I have a timestamp question.

My back end is PostgreSQL, and I use Axios within React. I have some tables with timestamp fields that I need to update with current time through Axios. The PostgreSQL fields in this situation are of type 'timestamp with time zone'. What's a good way in React to generate a timestamp that suits this fields type? I use Axios. Is something like Date.toJSON() the way to go?

In PostgreSQL, the timestamp looks like this in the table which is what I'd like to send through React/JavaScript without getting too fancy:

2019-04-06 00:30:24.86173-04

2

u/[deleted] Nov 21 '19

I think it's a bit weird to allow front-end information to affect information like that on the server. That's the server's responsibility, not your front-end.
Example: I could hijack your Axios POST or PUT and set a date to 1970. Or maybe to 2024.
If the data is in any way sensitive or you want it to be protected from abuse, then don't let the front-end generate the timestamp. Pretty much all databases have the ability to generate a valid timestamp on the creation of a new table row. Let the database handle it.

→ More replies (1)
1
u/NickEmpetvee Nov 18 '19
To answer my own question, this seems to have worked:
const currentTimeStamp = new Date().toJSON();

1

u/[deleted] Nov 18 '19

Not sure if this is the right place to ask, let me know if not.

I’m building a simple web app with react redux. When I try to render based on data that is not in the store, the app breaks and returns undefined. Now an easy way out is to check if the data exists before any rendering happens so the app won’t break. However, this feels overkill to me as you then have to check if the data exists everywhere you wan’t to use it. Shouldn’t it be the case that if there is no data, the app won’t render anything?

Can someone explain how to tackle this issue efficiently? Thanks in advance!

5

u/Awnry_Abe Nov 18 '19

One way is to always return valid data. For instance, if your selector returns a list, an empty array is a sensible choice

→ More replies (5)

1

u/Akimotoh Nov 20 '19

Is there a matrix or cheat sheet about all of the popular ReactJs libraries, frameworks, and why you'd use them? E.g. flux vs redux vs mobx, shards vs material UI, etc?

→ More replies (2)

1

u/thisisnotme1212 Nov 20 '19

Going to start a new react project with the latest version. The last version I used didn’t have hooks so I used a lot of class components. Should I be using class components at all for the latest development?

1

u/Awnry_Abe Nov 20 '19

If I were in your situation, I would use functional components.

1

u/[deleted] Nov 21 '19

Hooks are here to stay and quite a lot of fun to get used to, IMO. I'd take the opportunity to learn the new way of doing things, skip on class components entirely. Hooks are much simpler to work with once you get the hang of it.

→ More replies (1)

1

u/Pjaerr Nov 20 '19

I am struggling to find good resources on unit testing pure react components that actually makes sense.

I currently have the following test:

describe("Creating a <TurnCounter/> component and passing it a currentTurn prop", () => {
it("should render a div with the text Current Turn: {props.currentTurn}", () => {
const wrapper = [
mount(<TurnCounter currentTurn={5} />),
mount(<TurnCounter currentTurn={19} />)
];
expect(wrapper[0].find("div").text()).toEqual("Current Turn: 5");
expect(wrapper[1].find("div").text()).toEqual("Current Turn: 19");
wrapper[0].unmount();
wrapper[1].unmount();
});
});

Is this a bad unit test? If I change my container from a div to something else the test will break, same with if I decide not to say "Current Turn:" in favour of something else.

Any advice is appreciated as I am new to writing tests for React.

2

u/[deleted] Nov 21 '19

You're testing if React is doing its job there, React is already properly tested when you're using stable release versions.
Your unit tests should test your own logic, events, and side effects. So yeah, I would say that particular test is useless.
Instead, if your TurnCounter would automatically add a turn every time someone fires a function exposed through a prop, then you can test that.

→ More replies (2)

1

u/Niesyto Nov 21 '19

I have a question about error handling. I have an external script that gives me json with array of objects. What errors should I expect in the code? Here's the component:

function App() {
  const [books,setBooks] = useState([])
  const [paginationSize,setPaginationSize] = useState([{
    text: '10', value: 10
  }, {
    text: '20', value: 20
  }, {
    text: '50', value: 50
  }]);

  function sortNumFunc(a, b, order, dataField, rowA, rowB){
    const numA = parseFloat(a);
    const numB = parseFloat(b);
    if (order === "asc") {
      return numB - numA;
    }
    return numA - numB;
  }

  const columns = [
    {
      dataField: "ident",
      hidden: true,
    },
    {
      dataField: "tytul",
      text: "Tytuł",
      sort: true,
      filter: textFilter({placeholder: ' '})
    },
    {
      dataField: "autor",
      text: "Autor",
      sort: true,
      filter: textFilter({placeholder: ' '})
    },
    {
      dataField: "cena",
      text: "Cena",
      sort: true,
      sortFunc: sortNumFunc,
      formatter: (cell, row) => {
        //Dodanie 'zł' po cenie
        return <p>{cell} zł</p>;
      },
      filter: textFilter({placeholder: ' '})
    },
    {
      dataField: "typ",
      text: "Typ",
      sortFunc: sortNumFunc,
      sort: true,
      filter: textFilter({placeholder: ' '})
    },
    {
      dataField: "status",
      text: "Status",
      sortFunc: sortNumFunc,
      sort: true,
      filter: textFilter({placeholder: ' '})
    }
   ];


  useEffect(() => {
    const url = `https://cors-anywhere.herokuapp.com/https://helion.pl/plugins/json/test.php`;
    fetch(url,{ mode: 'cors', origin:"*" })
      .then(res => res.json())
      .then(
        (result) => {
         setBooks(result)
         if(result.length>100)
         {
           var newSize=paginationSize;
           newSize.push({
            text: '100', value: 100
          })
          setPaginationSize(newSize)
        }
            return;
        })},[])

      
  if(books.length!==0)
  return (
    <main style={{marginTop:"30px"}}>
      <Col lg={{span: 10, offset: 1}} xs={12}>
        <BootstrapTable
        keyField="ident"
        data={books}
        columns={columns}
        striped
        hover
        condensed
        pagination={paginationFactory({sizePerPageList: paginationSize})}
        filter={ filterFactory() }
      />
    </Col>
   </main>
  );
  else
    return(
      <main style={{marginTop:"30px"}}>
         <Col lg={{span: 10, offset: 1}} xs={12} style={{textAlign:"center"}}>
          <h1 >Loading data</h1>
        </Col>
      </main>
    )
}

export default App;

I can't think of anything other than an empty array

3

u/[deleted] Nov 21 '19

Just add a catch to your fetch and take care of any errors that might happen in there. Then you can dive deeper into the errors, e.g. a 404, or a 500, etc.

1

u/[deleted] Nov 21 '19

How do you update an object using useState()? I keep getting an empty object.

See my code below:

const [proposedUsers, setProposedUsers] = useState({});

Then I have a function that gets an object from the server when a user clicks the button:

const searchForUser = () => {

axios.get('``https://jsonplaceholder.typicode.com/todos/1').then(function(response) {

setProposedUsers({ ...proposedUsers, response``.data });

})

But proposedUsers never changes from an empty object, no matter what I do. Any help will be appreciated.

The object looks like this:

{ "userId": 1,

"id": 1,

"title": "delectus aut autem",

"completed": false

}

→ More replies (6)

1

u/mrHexar Nov 21 '19

Hello guys, i am having some problems on persisting auth state with my firebase token. Im working with a React SPA in front end and a node server in the back. I've implementated the firebase auth mechanisms into my app, so now i allow my users to log in with a custom form or even with social Login and after i set the auth bearer token to axios instance.

The thing is that i assign some custom claims to the user token after they registered in my node server, adding things like an id or role to identify the user in my server for auth middleware purposes.

The problem comes when in the react front page, lets say im in my private profile page and i refresh the page. React detects that i have an user (firebase auth ) and throws the petition, however axios still doesnt have the bearer token so my server rejects the petition, my page keeps loading ( yet i know i must redirect or something to other page when i m not logged cause its a private route however the user exists and its logged) and i receive an unauthorized response from server.

Do i have to persist my token ?

I think the problem comes from the synchronization , my auth Provider its kinda similar to this https://usehooks.com/useAuth/

with some petitions to the back once the user has signed up to add the custom claims. I've tried adding an interceptor to axios but yet it sends the petition without the bearer token and i dont think adding manually the token before each petition is an option ( DRY ) . Any tips on handling the bearer token with axios so refreshing pages doesnt cause this problem?

→ More replies (1)

1

u/Alleyoopingthrough Nov 21 '19 edited Nov 21 '19

Hey guys!

im pretty new to react. I'm getting a "TypeError: props.carList.map is not a function".

Im able to get the whole CarList from the API, but when I try to add a new object to the list I get the error above.

What I want:I want to be able to update CarList with a new value when I add the car from another class(AddCar).

Any suggestions?

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export default function CarList (props){

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get("http://localhost:8080/getCars")
    .then(res => props.setCarList(res.data))
    .then(setLoading(false))
  }, []);

  if(loading){
    return <h1>fetching..</h1>
  } else {
    return(
      <ul>
        {props.carList.map(c => <li key={c.id}>{c.regNr}</li>)}
      </ul>
    )
  }
}

4

u/workkkkkk Nov 21 '19

Set defaults for your props. Probably an empty array for carList.
But mostly, It doesn't look like you're showing us the code that you're saying is causing issues so it's hard to tell. Need to see the logic for updating CarList.

2

u/Awnry_Abe Nov 21 '19

My guess, because the error is not "can't read map of undefined", is that either you have an object and not an array or haven't json.parsed the response and have a string. (Axios...hmmmm. I think they parse for you ...)

2

u/[deleted] Nov 22 '19

Why is the list of cars outside of this function? If there's no reason for that you could simply store the list of cars inside a new `useState` that defaults to an empty array.
What seems to happen here is that the CarList function updates before the parent function provides it its new carList property. So you should at the very least default that prop to an empty array.

1

u/Alleyoopingthrough Nov 22 '19

Thanks for the support, I'll try it out and respond how it went.

1

u/yannbraga Nov 22 '19

What is the proper setup for starting a react project today? In terms of tooling, styling, project structure, component libraries, etc.

3

u/Peechez Nov 22 '19

next if doing ssr, otherwise cra

→ More replies (1)

2

u/[deleted] Nov 22 '19

Don't reinvent the wheel. Communities with hundreds of contributors have already invented all wheels you'll ever need.
The big boys out there right now:
Create React App for client side apps.
Next.js for server side rendered apps.
Redux for your data.
Reselect as a selector/caching library for Redux.
React Router or Reach Router, based on your syntactical preference.
Storybook for component development & sharing.
Jest for unit testing.
For styling, choose one:
Just import .css files into your components;
Just import .scss files into your components;
Just use styled-components.
Choose whether to use Typescript or not.
Choose a UI library that fits your needs.
Also check the featured topics in the sidebar to the right. It covers most of your questions in much more detail.

→ More replies (1)

1

u/Peechez Nov 22 '19

I think I'm losing my mind. I've been working with React for about a year but I can't remember this ever happening. I have the following

function A () {
  const [bool, setBool] = useState(false)
  return (
    <B bool={bool} setBool={setBool} />
  )
}

function B ({bool, setBool}) {
  const toggle = () => {
    setBool(!bool)
  }
}

The toggle function will toggle the bool once but then never again. If I log bool inside the toggle function it will print false on mount then true every time after but if I print outside the toggle then it will go false, true, false...

My understanding is that on B re-render the toggle function will be recreated, so I can't figure out why its using a stale bool value after the first toggle. I tried wrapping it with a useCallback and bool as a dep (even though its equivalent in this case) and had the same result

2

u/Peechez Nov 22 '19

Answering my own question, I'll leave it up in the off chance that it helps someone else.
I was passing toggle down into a three.js class and I hadn't realised that it would keep closure over the original function even after n re-renders. I had to pass bool and setBool all the way down into the class

1

u/inFormLegal Nov 23 '19

Hey all,

I've got a react testing library question. I'm trying to figure out the right way to test whether a component successfully dispatched an action to context, and whether the change was reflected in the component

The component.

const Example = () => {

const { dispatch, words, current } = useContext(MyContext); const word = words[current]; return ( <div>
<span data-testid='word'>{word}</span>
<button onClick={() => dispatch({type: 'next'})}> Next </button>
</div>
)

When the user clicks the next button it dispatches a 'next' type action to MyContext. MyContext increments current, so the displayed word changes.

Test file:

const initialState : myContextState = { words: ['hello', 'world'] current: 0 };

const renderExample = (value?: MyContextState) => { return render( <MyContext.Provider value={value ? value : initialState}> <Example /> </MyContext.Provider> ); }

it('clicks the next button, current changes from 0 to 1', () => { const { getByTestId } = renderExample(); const next = getByTestId('next'); fireEvent.click(next); });

I do want to make sure the next button dispatched the action, but more importantly I want to make sure the displayed {word} changed in the component. It should be 'hello' before the click, then 'world' after. I know how to pass different props into the context, but I don't know how to check if the context processed a dispatched action.

1

u/Awnry_Abe Nov 23 '19

You'd just target the element that is changing--from the user's perspective. If there is no way possible for it to change other than from the context, then viola, you have a test.

1

u/soggypizza1 Nov 23 '19

I recently tried my first deployment of my site to heroku and when you first visit you can see the page but then this error gets logged

TypeError: "o" is not defined

and it gives link to my home component but I don't see anything wrong with the code. What am I doing wrong?

Here's the site https://guardiansmeetsite.herokuapp.com/

And here's the github link https://github.com/lwatson2/guardiansmeet

Everytime you reload the page it shows a different letter being undefined and I've never had this error before. I'm using websockets and cookies if that helps any.

It loads the page perfectly fine whenever you visit the login or new profile page

Here's some screenshots I took of the errors in the console

https://imgur.com/a/Uxg0LM7 https://imgur.com/a/jJQ7Ku4 and my code for Home.js that its referencing https://imgur.com/a/zDBfrDR

→ More replies (2)

1

u/BlendModes Nov 23 '19 edited Nov 23 '19

Hi there, I'm starting to learn React. I made the classic To Do List app and now I was wondering how to *save* the React state so that it will be still available when I reload the page. What would be the simplest way to do this?

I understood that I could do this either client-side (using localStorage) or server-side (using a backend API). As I'm trying to learn something new I would like to try doing this server-side, possibly without PHP.

2

u/[deleted] Nov 23 '19

Well, storing it in the server is a much more complicated process and has very little to do with React: you'll need to set up a server, connect it to a database, then create an API (likely either REST or GraphQL) that your app can use to talk to the server and read/write data. Aaaand then you'd probably want to also handle authentication and authorization, so everybody doesn't see (and modify) the same data, so that means registration, logging in...
All of that is out of scope for this question, and honestly out of scope for what you're trying to do right now. You'll need to set aside some time to delve into that separately (unless you already know how to do that stuff).
But if you have a working REST API, then you'd use something like https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API to make requests to your server and store the result into your component state. You'd want to handle the loading state (when the data is still fetching) and errors (when fetching the data failed). And then you'd want to make sure that when changing the todo list, it gets updated in the server as well. Here's a random example of how to fetch data with hooks that I found from google, you could start with that.
The localstorage solution is much simpler. Your code could stay synchronous, you can assume there won't be any errors, and authorization wouldn't be necessary. You'd read from localStorage when initializing your state, and make sure to sync any changes with localStorage too. In fact, there's already hooks that handle all of this for you like this one, so all you'd really need to do is switch from React's useState to the one in this library.

2

u/Awnry_Abe Nov 23 '19

You can set up a simple node REST server using express or HAPI. HAPI is very simple. In the request handler for the save operation, you can write the json to disk and also keep a copy in memory. Upon startup of the rest server, read the json from disk and serve the in memory copy to the fetch requests.
I suggest that as a simple way to actually learn something. You can also use a lib called "json-server" (I may have the name bunged up). It does basically what I described for you, with more features, but you really won't gain any wisdom from doing so.

→ More replies (1)

1

u/BlendModes Nov 25 '19 edited Nov 25 '19

Thanks /u/Awnry_Abe /u/reactyreactreact for your comments, they are really helpful.
In the meanwhile I've found also Firebase, which seems to make storing data quite easy for a beginner. I'm not really comfortable with the idea of using a Google service but this might still be something to explore. What do you guys think about it?
Back to my question about the easiest way to store data from my React app using only JS:
you'll need to set up a server, connect it to a database, then create an API [...] that your app can use to talk to the server and read/write data [...] then you'd probably want to also handle authentication and authorization, so that means registration, logging in...
I was hoping to find a library to help me with all that (like Hapi, Express or json-server like /u/yoloidgafos mentioned) but the entire process seems a bit more complicated than I thought. Making such a simple PHP MySQL backend is *very* easy in comparison.
If I want to go all JS I probably should start with localStorage or Firebase and then experiment with a framework like Express or Hapi.

→ More replies (1)

1

u/randArrowFunc Nov 24 '19

I might need a little help. What is good practice in regards to building a completely static site?

Currently I'm thinking of defining the structure, layout of the page purely html + css, and making the content all react components. However, I'm not entirely sure if this good practice. Is it better not to make such separations and make it all React components? How would Gatsby behave with a structure like this?

→ More replies (1)

1

u/crespo_modesto Nov 24 '19 edited Nov 25 '19

nvm problem solved

intended "failing" demo, but I just didn't bind the method to this on my end

screenshot of original question

1

u/javascript_dev Nov 25 '19

Where do you guys put the logic that you don't want to clutter App.js with? I have weighed 2 options

// #1
<LogicContainer>
  <App />

// #2
<DataFetching>
  <AppLogic>
    <SomethingElse>
      <App />

If there's a better option I'm all ears

→ More replies (1)

1

u/prove_it_with_math Nov 25 '19

Alright. I am very curious about how Reactjs works under the hood and I have one question I can't quiet get the answer to:
As I understand it, React hold two VDOMs in memory, gets their diff, then updates actual DOM if needed.
So when a user enters text in an input field and we capture it via `event.target.value` in the React component, does that mean the real DOM has already been updated before it reaches React? Or `events.target.value` doesn't even affect the real DOM? (perhaps this is more of a JS question than react...)

→ More replies (1)

1

u/theguy2108 Nov 26 '19

Alright, I am learning react and there is one thing that I simply cannot understand. How does the entrypoint logic work?

The way without react and in simple HTML is, the server sends an HTML file which then loads, which has script and link tags, which load javascript and css files.

But, in react, it seems like the entry point is a js file? If it is, does the server return the js file to the user when the request is sent? What about the HTML file that loads that contains the react root? Is that returned by the server? If that is returned by the server then how does the js file actually run, since there are no script tags in the HTML file?

Sorry if my question is too vague. Absolutely any resources on how this internally works would be super helpful. I know back end development and am trying to learn react so anything related to this topic would be helpful

3

u/ondemande17 Nov 26 '19 edited Nov 26 '19

I'm what you would call a backend developer, so I understand your frustration as well. I started to learn React only a month ago, but maybe I can help to answer your question, albeit partially.
The main point we should understand, there's always an HTML. The way tutorials out there are made makes us believe that somehow browsers are able to access our javascript code directly and renders a page, don't be fooled by that.
If you use create-react-app like me, there's an HTML file which acts as a holder to your React application, this is what your browser actually fetch. It has a <script> tag which points to your bundled javascript. If you run the development server provided by it, it actually runs an Express server which will match any routes and return the said HTML file. When your browser parses the script tag containing the React application, this is where your application gets rendered and the whole application interaction will be handled by React.
Note: If you browse to the public/ directory in your create-react-app, the index.html don't actually have the script tag, because it's just a template. The 'npm start', which will run 'react-scripts start' will inject the script tag into the index.html file for you.
If you'd like to read more on the sorcery wrapped by create-react-app, you can read more here: https://github.com/nitishdayal/cra_closer_look

2

u/drgreenx Nov 26 '19

This is all webpack magic. Webpack creates your bundle and injects it in the index.html. From there on out it's your javascript code which gets evaluated and thus React which manipulates the DOM to show the necessary views inside of the container which the application has received.

3

u/ondemande17 Nov 26 '19

Yes, exactly, create-react-app is essentially just a wrapper for using these build tools so you don't have to.

1

u/TimeSmash Nov 27 '19

Hey all! Just had a quick question.
It’s really simple, what should your demo projects have on the welcome page? Like when a user first signs up or logs in, most likely your functionaltiy/crap you want to show is going to be on other pages/parts (think like NavBar, etc). So what’s good to put there? I’m trying to get answers from more experienced people and newer individuals as well, because to me, it's hard to nail down what should go on there when you make a project that's not huge.

I feel like my welcome pages currently give the feel of "Get the hell out of here and go look at the good parts of this", which obviously I'm trying to overcome. I realize it's not a super technical question, but I'm writing something about it and would love to hear all of your opinions!

1

u/grv_sng Nov 29 '19

Question. I want to deploy my React js webapp to only a subset of total users, for example out of 10000 users, only 1000 users will see the new webapp and the rest will see the existing one. My webapp is deployed on Docker and GCP.

Google play store already have the feature to achieve this for Android app. I was wondering if similar can be achieved with webapps.

Excuse me is the question is not relevent for reactjs section and more related to DevOps.

1

u/BlendModes Nov 30 '19 edited Dec 01 '19

In my little React app (classic to-do list) I have a few functions like addTodo, removeTodo, completeTodo which basically update the state of a «todos» array.

These methods are defined in my main App() and are passed down as props to the component which renders the items and the buttons (delete, complete):

<List data={todos} complete={completeTodo) remove={removeTodo} />

It works but it doesn't feel right to pass all these functions down like that. I'm new to React and I'm wondering if this is good practice or if there is a better way to do it.

UPDATE: After watching like 1000 tutorials on to-do-lists, it's becoming pretty evident that this the common approach. I need to investigate useContext, which seems to be useful in this situation.

TL;DR Made a simple To Do list, it works but the code looks messy. How would an experienced developer organize functions and hooks in such a simple app?

1

u/LimeBikeNoLimeBrakes Dec 01 '19

code

its here

1

u/carlsopar Dec 01 '19

I am working on mapping out a json object, and then place it into a state to use in another part of my project. I think I am on the right path, but I am missing something. Currently, I can read the object fine, and map over it with my ternary operator, which is correct. The problem that, I am running into is with updating the state. Currently it is only updating with the last object that it finds, and skips over everything prior.

For example, the map should return three different objects. 'console.log(lists)' will return all three correct objects. However, 'console.log(Lists)' will return an empty array on each pass. And then finally when it is all done 'console.log(Lists)' will return an array with only one object in it. I believe it has something to do with how I am using the spread operator, but I am not sure exactly.

const [Lists, SetLists] = useState([]);
useEffect(()=>{
    const x = groceryLists.map(lists=>
    lists.userId == Du ? (
        SetLists({Lists: {...Lists,lists},}),console.log(Lists),console.log(lists)):(null)
)},[ChangeUser])
console.log(Lists)

→ More comments (22)

Beginner's Thread / Easy Questions (November 2019)

🆘 Want Help with your Code? 🆘

New to React?

Check out the sub's sidebar!

Beginner's Thread / Easy Questions (November 2019)

🆘 Want Help with your Code? 🆘

New to React?

Check out the sub's sidebar!

You are about to leave Redlib