ReactJS Interview Questions and Answers
Question - 61 : - How to perform automatic redirect after login?
Answer - 61 : -
The react-router package will provide the component in React Router. Rendering of a component will navigate to a newer location. In the history stack, the current location will be overridden by the new location just like the server-side redirects.
import React, { Component } from 'react'
import { Redirect } from 'react-router'
export default class LoginDemoComponent extends Component {
render() {
if (this.state.isLoggedIn === true) {
return
} else {
return
{'Please complete login'}
}
}
}
Question - 62 : - Why can't browsers read JSX?
Answer - 62 : -
Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.
Question - 63 : - What do you understand from "In React, everything is a component."
Answer - 63 : -
In React, components are the building blocks of React applications. These components divide the entire React application's UI into small, independent, and reusable pieces of code. React renders each of these components independently without affecting the rest of the application UI. Hence, we can say that, in React, everything is a component.
Question - 64 : - What is Props?
Answer - 64 : -
Props stand for "Properties" in React. They are read-only inputs to components. Props are an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from the parent to the child components throughout the application.
It is similar to function arguments and passed to the component in the same way as arguments passed in a function.
Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.
Question - 65 : - What is a State in React?
Answer - 65 : -
The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.
Let's create a "User" component with "message state."
import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to JavaTpoint'
}
}
render() {
return (
)
}
}
Question - 66 : - How can you update the State of a component?
Answer - 66 : -
We can update the State of a component using this.setState() method. This method does not always replace the State immediately. Instead, it only adds changes to the original State. It is a primary method which is used to update the user interface(UI) in response to event handlers and server responses.
Example
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "Welcome to JavaTpoint"
};
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
msg:"Its a best ReactJS tutorial"
});
}
render() {
return (
{this.state.msg}
);
}
}
Question - 67 : - What is an event in React?
Answer - 67 : -
An event is an action which triggers as a result of the user action or system generated event like a mouse click, loading of a web page, pressing a key, window resizes, etc. In React, the event handling system is very similar to handling events in DOM elements. The React event handling system is known as Synthetic Event, which is a cross-browser wrapper of the browser's native event.
Handling events with React have some syntactical differences, which are:
- React events are named as camelCase instead of lowercase.
- With JSX, a function is passed as the event handler instead of a string.
Question - 68 : - How do you create an event in React?
Answer - 68 : -
We can create an event as follows.
class Display extends React.Component({
show(msgEvent) {
// code
},
render() {
// Here, we render the div with an onClick prop
return (
);
}
});
Example
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
companyName: ''
};
}
changeText(event) {
this.setState({
companyName: event.target.value
});
}
render() {
return (
Simple Event Example
You entered: { this.state.companyName }
);
}
}
Question - 69 : - Explain the Lists in React.
Answer - 69 : -
Lists are used to display data in an ordered format. In React, Lists can be created in a similar way as we create it in JavaScript. We can traverse the elements of the list using the map() function.
Example
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((myList) =>
{myList} );
return (
Rendering Lists inside component
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
,
document.getElementById('app')
);
Question - 70 : - What is the significance of keys in React?
Answer - 70 : -
A key is a unique identifier. In React, it is used to identify which items have changed, updated, or deleted from the Lists. It is useful when we dynamically created components or when the users alter the lists. It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time. It increases application performance.