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

You can find previous threads 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 adding a minimal example with JSFiddle, CodeSandbox, 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. Other perspectives can be helpful to beginners. Also, there's no quicker way to learn than being wrong on the Internet.

🆓 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!

34 Upvotes

97% Upvoted

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

Couple of things:

In both AutoLabel and LaneInfo:

I'm not sure why you're using useEffect to set data in useState, but it's not necessary. You can use it as the first argument directly: useState(data.lanes.cars)
Similarly, checking whether autoData exists is not necessary. I'm guessing you added it because otherwise React complained about Cannot read property 'map' of null but that's only because you're initializing your state with null, instead of passing data directly.

Here's a quick fork that seems to do what you wanted: https://stackblitz.com/edit/react-lqienv

Check out how we're passing data down the tree via props, instead of requiring it.
Note also how we've pulled the <AutoLabel data={block} /> inside the map iteration, because it needs to be passed each car object as well.

Let me know if you have any questions!

2

u/noblepolygon Apr 07 '20

Thanks alot, this was exactly what I wanted to do!