Array.push() not working in React; I'm know you can't change state through push()

1

Hey there beautiful coders,

I am trying to push some information to an array in the global scope (outside of any react Classes etc) by using the onClick event on some rendered JSX code. The information that I only want to push once the onClick event has been triggered is immediately being pushed to the array.

e.g.
<div id="clear" onClick={matharr.push("happy")}>AC</div>

“happy” is being immediately pushed to the array in the global scope. If it helps, this array has been written before the React Class from which the ‘matharr.push’ is written

Thank you in advance! You geniuses always have the answers!

2

Try wrapping it in a function.

<div id="clear" onClick={() => matharr.push("happy")}>AC</div>

3

Doesn’t work, but thank you so much for trying.

4

Without seeing your code I can’t really help you. But what I said should work.

5

The codes very scrappy because I have been experimenting with different methods to try and make this work, and I’m just messing around with functionality etc, but hopefully you can see what I’m doing wrong?
https://codepen.io/kingdopamine/pen/vYOJrKX?editors=0010

6

What makes you think it isn’t working? I moved it to codesandbox because I really can’t stand using Codepen for React (check the console for the array).

I’d really suggest going through some more react learning material, try this react cource. And check out the React docs on event handling.

I’m not sure why you don’t add the methods to the class and use the state on the component? What is the point of having all the code outside the app?

2 Likes
7

Thank you for your help. I’m definitely still totally useless at React, I am in the process of doing a course (this was one of the exercises); I’ve still got a hell of a lot to learn. Thank you so much for your help and your patience.

1 Like
8

React can be really tough at first. It takes time to learn all the ins and outs and there are a lot of React idiosyncrasies that need to be “conformed” to.

I’d suggest starting with something simpler than a calculator. Learn the basics first and do some simple projects to get your feet wet. Try the course I linked to.

In any case, whenever you have a question do not hesitate to make a thread and ask. That is what the community is here for.

Keep it up!

1 Like
9

Doesn’t work, but thank you so much for trying.

Maybe a little less of a “tone” would be good. As a professional React developer, even before I saw lasjorg’s answer, based on how little I saw of your code, that was exactly the first thing that came to mind. He is 100% correct. Whether or not that fixed your problem, that change needed to be made.

1 Like
10

And yes, React is weird at first - as if web dev in general isn’t hard enough. It takes a while to wrap your head around it, and even then it can be tough for a while.

1 Like
11

To look at your problem, you hit the nail on the head here = “I’m know you can’t change state through push()”

You’re trying to get around the React way of doing things by doing it a non-React way. Your way actually works, it is pushing onto that (uggghhh) global variable. The problem is that React has no way of knowing to call the render method. It is listening to this.state and this.props to tell if it needs to rerender. But you never change those so it never calls the render method. That’s why the state of the component should be kept in local state (or passed in from a parent component on props). You will not get things to work if you don’t do them the React way. I think that this will accomplish a little more what you are thinking:

// ...
class Calculator extends React.Component {
  divide(){matharr2.push("/")};
  constructor(props) {
    super(props);
    this.state = { matharr: [] };
  }
  

  render(){
    console.log(this.state.matharr);
    return(
      <div>
        <div id="calculators">
          <div id="display">{matharr2}</div>
          <div id="clear" onClick={() => this.setState({ matharr: [...this.state.matharr, 'howdy']})}>AC</div>
// ...

As lasjorg suggest, take a step back and learn React a little better. It is very powerful, but certain things have to be done certain ways.

1 Like
12

Use arrow function as below

<div id="clear" onClick={() => {matharr.push("happy")}}>AC</div>
13

What do you mean a little less “tone”? I was extremely polite?! Do you think I was being sarcastic or something?

14

Wow, thank you so much, a very detailed and informative answer. You are correct, I think I have been trying to get around doing things the react way; I have been basically trying to use React like javascript as much as possible, and only trying to do things the ‘react way’ as a last resort.
I will definitely do some more studying of react to try and and grasp the concepts of the react way a lot better

15

I think I misread your response. I think I misread it as “thank you so much for playing” which seemed rather flippant, especially because he was right, your code couldn’t work without that change. But that isn’t what you wrote, sorry about that.

16

Hi Kevin!
I finished the calculator!
I was wondering if you’d be willing to give me a brutal critique of my code?
Maybe a score out of 10 as well, so that I know how far I am from being a decent coder?
Any pointers would be massively appreciated

Here is the link: https://codepen.io/kingdopamine/pen/vYOJrKX?editors=1010

17

Hi lasjorg!
I finished the calculator!
I was wondering if you’d be willing to give me a brutal critique of my code?
Maybe a score out of 10 as well, so that I know how far I am from being a decent coder?
Any pointers would be massively appreciated

Here is the link: https://codepen.io/kingdopamine/pen/vYOJrKX?editors=1010

18

  1. It is failing test 11 for me. It allows for input like this 0..0

  2. I would not suggest having top-level variables outside the app. See if you can move them to the app state.

  3. This project has a lot of potential edge cases that are hard to test for. One I did find, is if you enter multiple zeros before a decimal point it breaks, e.g. 00.3 + 00.5 results in SyntaxError: Unexpected number

  4. It would be nice to have keyboard support.

  5. I would make the buttons using button elements. If not, at least add cursor: pointer to the CSS for them.

I didn’t really look at the code much but you seem to have learned a lot since your last post, which is great. You are using state and updating the view using the state, so you have picked up on the React way of doing things.

Most of the code for this project is plain Javascript logic and has nothing to do with React. But the calculator seems to be working pretty well. I’m sure there might be issues as I said this project has a lot of potential edge cases.

I can’t give it a score, I wouldn’t know what to give it and it seems like a poor metric to go by. Good job.

1 Like
19

@Dopamine You make it so hard to take you serious.

20

@crudfunc That seems a bit rude. What is that even suppose to mean? Please give constructive feedback and try to help people.

1 Like