JOBSEEKER?

React Interview Questions

Practice for React interviews by solving TestDome questions. Our interview questions are used by more than 7,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Need to practice your React skills for an upcoming job interview? Try solving these React interview questions that test knowledge of components, event handling, reference hooks, and other skills. We’ll provide feedback on your answers, and you can use a hint if you get stuck.

These React interview questions are examples of real tasks used by employers to screen job candidates such as React developers, JavaScript developers, front-end developers, and others that need to use the React library and leverage its commonly used programming patterns.

1. Toggle Message

Conditional rendering Event handling Managing state
   
Easy  

The Message component contains an anchor element and a paragraph below the anchor. Rendering of the paragraph should be toggled by clicking on the anchor element using the following logic:

  • At the start, the paragraph should not be rendered.
  • After a click, the paragraph should be rendered.
  • After another click, the paragraph should not be rendered.

Finish the Message component by implementing this logic.

HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


  •   At the start, the paragraph should not be visible: Wrong answer
  •   After a click, the paragraph should be visible: Wrong answer
  •   After a second click, the paragraph should not be visible again: Wrong answer


2. Focus

Components
   
Easy  

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.
HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


  •   The focused property has an initial state of true: Wrong answer
  •   Changing the focused prop from false to true focuses the input: Wrong answer


3. Change Username

React Hooks Reference Hook
   
Hard  

This application should allow the user to update their username by inputting a custom value and clicking the button.

The Username component is finished and should not be changed, but the App component is missing parts. Finish the App component so that the Username component displays the inputted text when the button is clicked.

The App component should use the React.useRef Hook to pass the input to the Username component for the input element and for the Username component.

For example, if the user inputs a new username of "John Doe" and clicks the button, the div element with id root should look like this:

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>
HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


  •   Example case: Wrong answer
  •   Clicking on the button updates the username from the input: Wrong answer
  •   Reference Hook was used to update username: Wrong answer


4. Grocery App

Components Managing state React Hooks
   
Hard  

You have a GroceryApp component, 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.

For example, passing the following array as products prop to GroceryApp [{ name: "Oranges", votes: 0 }, { name: "Bananas", votes: 0 }] and clicking the '+' button next to the Oranges should result in HTML like:

<div id="root">
  <ul>
    <li>
      <span>Oranges</span> - <span>votes: 1</span><button>+</button> <button>-</button>
    </li>
    <li>
      <span>Bananas</span> - <span>votes: 0</span><button>+</button> <button>-</button>
    </li>
  </ul>
</div>
HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


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


5. Image Gallery App

Components Event handling Managing state
   
Hard  

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://goo.gl/kjzfbE">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>

Implement the ImageGallery component that accepts a links prop and renders the gallery described above so that the first item in the links prop is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>
HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


  •   Example case: Wrong answer
  •   ImageGallery will render the correct list: Wrong answer
  •   Remove a single image: Wrong answer
  •   Remove multiple images: Wrong answer


6. Todo List

Event handling
   
Easy  

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 the item object from the items list as the first parameter and the event as the second parameter.

HTML5, CSS3, React v16 (available as React and ReactDOM)  
 


  •   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


If you feel ready, take one of our timed public React Interview Questions tests:
HTML/CSS

HTML/CSS and React Online Test (Easy / Hard)

HTML/CSS, JavaScript, and React Online Test (Easy / Hard)

HTML/CSS, React, and Node.js Online Test (Easy / Hard)

HTML/CSS, React, Node.js, and SQL Online Test (Easy / Hard)

React

React Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.
Dashboard Start Trial Sign In Home Tour Tests Questions Pricing For Jobseekers