React Interview Questions

Want to become an expert in cracking React interview questions/ReactJS interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public React Interview Questions Test.

To use our service for testing candidates, buy a pack of candidates.


1. Focus

React Components Public New

The TextInput component renders an input element in the DOM and accepts a ref that is forwarded to that input element. Finish the FocusableInput component:

  • The component should accept a focused prop.
  • When the focused prop is changed from false to true, and the input is not focused, it should receive the focus.
  • If on mounting the focused prop is true, the input should receive the focus.
Easy 
15min
HTML5, CSS3
 


Run OK, but 2 out of 2 test cases fail:

  •   Property focused is true initially and the input has focus: Wrong answer
  •   Changing the focused prop focuses the input: Wrong answer


2. Todo List

React Event handling Public New

Write a TodoList component that expects an items prop, and a list of objects, each with text and done properties.

TodoList also accepts an onItemClick function prop, which should be called when a user clicks an item in the list, if the item is not marked as done. Otherwise, the onItemClick should not be called and the click event itself should not be propagated further. The function should be called with two parameters:

  • the item object from the items list.
  • the event.
Easy 
15min
HTML5, CSS3
 


Run OK, but 2 out of 2 test cases fail:

  •   Clicking on a not done item should trigger onItemClick: Wrong answer
  •   Clicking on a done item should not trigger onItemClick or a parent click: Wrong answer


3. Grocery App

React Components Public New

You have a GroceryApp class, which receives a list of products, each one with name and votes. The app should render an unordered list, with a list item for each product. Products can be upvoted or downvoted.

By appropriately using React state and props, implement the upvote/downvote logic. Keep the state in the topmost component, while the Product component should accept props.

Easy 
20min
HTML5, CSS3
 


Run OK, but 3 out of 3 test cases fail:

  •   GroceryApp should render a list item for each product: Wrong answer
  •   Clicking on "+" button increases product votes: Exception
  •   Clicking on "-" button decreases product votes: Exception


If you feel ready, take one of our timed public React Interview Questions tests:
  • HTML/CSS and React Online Test (Easy)
  • HTML/CSS, JavaScript, and React Online Test (Easy)
  • React Online Test (Easy)
Not exactly what you are looking for? Go to our For Jobseekers section.