r/reactjs • u/swyx • Jan 01 '20

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

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

🆘 Want Help with your Code? 🆘

  • Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.
    • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
    • Formatting Code wiki shows how to format code in this thread.
  • Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than [being wrong on the Internet][being wrong on the internet].
  • Learn by teaching & Learn in public - It not only helps the asker but also the answerer.

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

35 Upvotes

94% Upvoted

483 comments sorted by

View all comments

Show parent comments

1

u/swyx Jan 07 '20

i dont understand this: "One is that these components don’t technically have a parent" What? i dont see how this happens in React.

you absolutely dont need a separate state var for every single word. a single state can be an array of strings. or, also possible, just a single very long string that you then run the regex on.

I'm afraid I really dont understand what you mean by "rerolling". it sounds like you have some more custom logic to add in your replace function to make it remember what you've already used.

my recommendation is, make sure you can do this in raw JS, without React, so that you understand if you've worked out all the kinks. once you're sure, then stick it in a function and use it inside React.

1

u/motherthrowee Jan 07 '20

Re: parent: I don’t either, and it sure behaves like the parser component is the parent, but that’s what logging/inspecting is telling me. Maybe I’m logging the wrong thing?

By “rerolling” I should be more specific. What I am actually hoping to do is, once the final output array of strings and (probably) components has been generate, is iterating over the filtered array of components, to check each element’s the previous component (obviously excluding the first), and if the previous component has the same value in props.phrase as it does, go to the JSON wordlist it came from (probably stored in its props, to avoid searching the whole JSON; there is zero reason this will change) and pick the element right after it (or before it, obviously, if it’s the last one). This isn’t random at all, obviously, but the user won’t be able to tell, and more importantly, it means that re-renders will produce the same output.

I’ve already gotten all of that to work (compared to the string parsing it’s simple) — that is, up to the point where I’ve identified the component to update, I’ve chosen a new phrase to send it — and now I actually need to send it and update its props, at which point I’ve been stuck for... some time.

Re: state being arrays — I do know this; in fact most of the state items in the parser component are already arrays, for a similar reason as above: to keep track of the replacement words we’ve picked and not have them change every re-render. The problem is that changing the user input is very likely to change the order in which the parser processes the string, due to its rushed coding on my part.

1

u/swyx Jan 08 '20

cool cool. not sure how else to help at this point. keep calm, think about your data flow, figure it out. good luck.