Job-ready Online Courses: Click for Success - Start Now!
If you are a developer looking to improve your React skills or prepare for a React coding interview, it’s important to understand the concepts and techniques that are commonly used in React development. In this article, we will cover a range of React coding interview questions that you may encounter during the interview process. Whether you are a seasoned React developer or just getting started with the library, this article will provide you with insights and tips to help you succeed in React coding interviews.
React JS Interview Questions
1. Write a simple React component that renders a button with a click handler.
import React from "react";
function Button(props) {
return <button onClick={props.onClick}>Click Me</button>;
}
export default Button;
2. Write a component that renders a list of items, each with a button to delete the item.
import React from "react";
function ItemList(props) {
const handleDelete = (id) => {
props.onDelete(id);
};
return (
<ul>
{props.items.map((item) => (
<li key={item.id}>
{item.text} <button onClick={() => handleDelete(item.id)}>Delete</button>
</li>
))}
</ul>
);
}
export default ItemList;
3. Write a component that fetches data from an API and displays it in a list.
import React, { useState, useEffect } from "react";
function DataList() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
export default DataList;
4. Write a component that uses React Router to render different components based on the current URL path.
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function Home() {
return <h1>Welcome to the homepage!</h1>;
}
function About() {
return <h1>About us</h1>;
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
5. Write a component that renders a form with input fields for a username and password, and handles form submission.
import React, { useState } from "react";
function LoginForm() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
// handle form submission logic here
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
</label>
</br>
<label>
Password:
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</label>
</br>
<button type="submit">Login</button>
</form>
);
}
export default LoginForm;
6. Write a component that renders a dropdown select menu with options populated from an array.
import React, { useState } from "react";
function Dropdown(props) {
const [value, setValue] = useState("");
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<select value={value} onChange
)
7. How do you create a new React component?
import React from 'react';
function MyComponent(props) {
return <div>{props.message}</div>;
}
export default MyComponent;
8. How do you render a React component?
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
ReactDOM.render(<MyComponent message="Hello, World!" />, document.getElementById('root'));
9. How do you handle events in React?
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked the button {count} times.</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default MyComponent;
10. How do you use props in a React component?
import React from 'react';
function MyComponent(props) {
return <div>{props.message}</div>;
}
export default MyComponent;
11. How do you use state in a React component?
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked the button {count}
}
12. How do you handle form submission in React?
import React, { useState } from 'react';
function MyComponent() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
console.log('Name:', name);
console.log('Email:', email);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
</label>
</br>
<label>
Email:
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
</label>
</br>
<button type="submit">Submit</button>
</form>
);
}
13. How do you create a reusable component in React?
import React from 'react';
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}
export default Greeting;
14. How do you handle errors in React?
import React, { useState } from 'react';
function MyComponent() {
const [error, setError] = useState(null);
const handleButtonClick = () => {
try {
// Some code that might throw an error
} catch (error) {
setError(error);
}
};
return (
<div>
{error && <p>Error: {error.message}</p>}
<button onClick={handleButtonClick}>Click me</button>
</div>
);
}
15. How do you use React with Redux?
// store.js
import { createStore } from 'redux';
const initialState = {
count: 0,
};
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const store = createStore(reducer);
export default store;
16. How do you use React with TypeScript?
import React, { useState } from 'react';
interface Props {
name: string;
}
function MyComponent({ name }: Props) {
const [count, setCount] = useState<number>(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
<p>Hello, {name}!</p>
</div>
);
}
export default MyComponent;
17. How would you create a stateful component in React?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
18. How would you create a functional component in React?
import React from 'react';
function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}
19. How would you pass data from a parent component to a child component in React?
// Parent Component
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
render() {
const data = { name: 'John', age: 30 };
return <ChildComponent data={data} />;
}
}
// Child Component
import React from 'react';
function ChildComponent(props) {
return <div>Name: {props.data.name}, Age: {props.data.age}</div>;
}
20. How would you create a new state object that is based on the previous state in React?
this.setState(prevState => ({
count: prevState.count + 1
}));
21. How would you handle user input in React?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
22. How would you conditionally render components in React?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { isLoggedIn: false };
}
render() {
const isLoggedIn = this.state.isLoggedIn;
if (isLoggedIn) {
return <div>Welcome, user!</div>;
} else {
return <div>Please log in.</div>;
}
}
}
23. How would you create a list in React?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: ['item 1', 'item 2', 'item 3']
};
}
render() {
const listItems = this.state.items.map((item) =>
<li key={item.toString()}>{item}</li>
);
return (
<ul>
{listItems}
</ul>
);
}
}
24. How would you create a React component that uses props to render its content?
import React from 'react';
function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}
// Usage
<MyComponent name="John" />
25. How would you create a React component that receives children as props?
import React from 'react';
function MyComponent(props) {
return <div>{props.children}</div>;
}
render() {
return (
<button onClick={() => this.handleClick('Hello')}>Click me</button>
);
}
}
26. How would you create a React component that renders a list of items and allows the user to delete items?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: ['item 1', 'item 2', 'item 3']
};
}
handleDelete = (index) => {
const items = [...this.state.items];
items.splice(index, 1);
this.setState({ items });
}
render() {
const listItems = this.state.items.map((item, index) =>
<li key={index}>
{item}
<button onClick={() => this.handleDelete(index)}>Delete</button>
</li>
);
return (
<ul>
{listItems}
</ul>
);
}
}
27. How would you create a React component that renders a form and handles form submission?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
28. How would you create a React component that renders a select menu and handles changes to the selected option?
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { value: 'option1' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
render() {
return (
<select value={this.state.value} onChange={this.handleChange}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
);
}
}
29. Write a component that fetches data from an API and displays it.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const DataFetcher = ({ apiUrl }) => {
const [data, setData] = useState([]);
useEffect(() => {
axios.get(apiUrl).then(response => {
setData(response.data);
});
}, [apiUrl]);
return (
<ul>
{data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
};
export default DataFetcher;
30. Implement a form that allows users to add new items to the list.
import React, { useState } from 'react';
const ItemForm = ({ onAddItem }) => {
const [name, setName] = useState('');
const handleSubmit = e => {
e.preventDefault();
onAddItem({ name });
setName('');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={e => setName(e.target.value)} />
<button type="submit">Add Item</button>
</form>
);
};
export default ItemForm;
31. Write a component that uses the useContext hook to access a shared context value.
import React, { useContext } from 'react';
import MyContext from './MyContext';
const MyComponent = () => {
const value = useContext(MyContext);
return (
<div>{value}</div>
);
};
export default MyComponent;
Conclusion:
The article provides insights and tips for developers on how to prepare for React JS coding interviews, as well as examples of React code that demonstrate common concepts and techniques. It also provides explanations of React-related terms and concepts to help readers better understand the technology. Overall, the article serves as a helpful resource for developers looking for React JS Interview Questions and succeed in interviews.