10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

Last month, I posted 2 ReactJS interview questions 🎤 - Advance Questions and Commonly Asked Question and got a significant welcome by dev.to community. 🤗 🥰 Many thanks to all of you!

I decided to complete the package by creating codepen exercises 📝 and a video 📺 to follow up on that effort as one will need to code following the technical interview questions. Also, I added potential solutions for the exercises which is listed below.

If you need to brush up 🆙 your ninja ReactJS skills, you can try to answer the exercises below OR click the video below to guide you step-by-step interactively. (No filler, fast, straight to the point as I highly respect/value your time)

These exercises and solutions will also be available on the video as well.

Exercises: 🏋️

Display simple JSX

• https://codepen.io/angelo_jin/pen/wvrygZa

Display array of users to browser

• https://codepen.io/angelo_jin/pen/QWqQdXE

Show/Hide Element on Screen

• https://codepen.io/angelo_jin/pen/zYERZZL

2 way data binding in ReactJS

• https://codepen.io/angelo_jin/pen/MWEQmqN

Disable a button

• https://codepen.io/angelo_jin/pen/YzrazGY

Update the parent state

• https://codepen.io/angelo_jin/pen/JjrLjOy

Dynamically add child components (React Children)

• https://codepen.io/angelo_jin/pen/BawrpeX

Sum of Two Numbers

• https://codepen.io/angelo_jin/pen/zYEWZNR

Create Counter App

• https://codepen.io/angelo_jin/pen/mdBxWwN

Fetch data from an API

• https://codepen.io/angelo_jin/pen/oNGqZpm

Solutions: 🙋

Display simple JSX

• https://codepen.io/angelo_jin/pen/xxXrZLd

Display array of users to browser

• https://codepen.io/angelo_jin/pen/wvreMpZ

Show/Hide Element on Screen

• https://codepen.io/angelo_jin/pen/abLwyrL

2 way data binding in ReactJS

• https://codepen.io/angelo_jin/pen/yLzvMop

Disable a button

• https://codepen.io/angelo_jin/pen/dyVmyYz

Update the parent state

• https://codepen.io/angelo_jin/pen/KKXoKgO

Dynamically add child components (React Children)

• https://codepen.io/angelo_jin/pen/MWEVJNb

Sum of Two Numbers

• https://codepen.io/angelo_jin/pen/BawrWzy

Create Counter App 🕒

• https://codepen.io/angelo_jin/pen/yLzKMXX

Fetch data from an API

• https://codepen.io/angelo_jin/pen/zYEWZdW

Happy coding and good luck on your next interview! I hope this material will help you land your next dream job. 💰 🚗 📈

Comments

[Anand-Baraik]

Good job man. Intresting exercises.

[Let's Code]

thank you Anand! What is your favorite exercise and why? Or perhaps anything that you would like to see on the challenge.

[Ersan Karimi]

For me (beginner), this is very helpful and gives an overview of the interview later. Thank you for sharing

[Let's Code]

absolutely! what is your status currently? are you in the job market?

[Saty4Dev]

It's difficult for beginners (like me) to directly dive into building projects after learning React from online tutorials. Thanks for these practice problems, need more of these on React. :)

[Let's Code]

ive been there before and i know how you feel. i’ll try to find more time and do more. i’ll post when i have something ready. thanks for the comment

[Veronica Valenzuela]

This was so helpful, thank you!

[Let's Code]

your welcome Veronica! check the youtube video i have above for additional reference. Many found it useful as well.

[armenic]

Thanks for nice challenges. I really enjoyed solving them! By the way beta.reactjs.org/ also started to include challenges. Maybe you can contribute to the new docs? They are open for public PRs.

[Let's Code]

your welcome! ill definitely check that out. thanks for the link.👏🏻👍

[Lovish Tater]

Hi armenic,
I want to contribute new challenges in beta.reactjs.org/. I don't know how to contribute, I saw React's git repo but I didn't understand how to start. can you please guide me.

[Let's Code]

check this out - reactjs.org/docs/how-to-contribute...

[Aliafify]

thanks for that nice chalanges

[Let's Code]

your welcome buddy! i feel great that this content helps many devs. 👍

[abbydorso]

this is so helpful for interview prep, thank you!!

[Let's Code]

helping engineers like you and me are the goal of this post and video.

I appreciate the comment and stay tuned for more post like this.

[Mary-Katherine McKenzie]

Great exercises! Had fun with these!!

One thing I want to note - in your solutions, I often see the pattern:

const [value, setValue] = React.useState(0)

<button onClick={setValue(value +1)}>Increment</button>

However, the React docs prefer this method of using the previous state value - passing a function that receives the previous state value.

const [value, setValue] = React.useState(0)

<button onClick={setValue(prevValue => prevValue + 1)>
    Increment
</button>

Updating state with value instead of using the previous state function may result in some buggy behavior because of React's unpredictable & async state-updating logic. Likely won't see anything buggy with these examples since they aren't too complex, but just wanted to shout out that nuance!

Thanks again for these great exercises!!

[Let's Code]

yes, passing a function is way better and the right approach to handle setting state here. Glad that you found this post useful and you are very welcome. Will create more post/video like again.

[Isabelle Francis]

For create counter app challenge, i created two functions (decrease and increase) to be passed instead, later simply calling ....is that inline with best practise?

[Let's Code]

it is and is common in any ReactJS applications

[sandym]

I enjoyed this! Thank you so much!!! If anyone have anything similar please share! I would love to tackle on some more!
Thank you in advance!

[Let's Code]

you are welcome!