block or block which renders a route exclusively.
Example
render((
)
should be
render(
)
Question - 92 : - Why switch keyword used in React Router v4?
Answer - 92 : -
The 'switch' keyword is used to display only a single Route to rendered amongst the several defined Routes. The component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.
Question - 93 : - How to use styles in React?
Answer - 93 : -
We can use style attribute for styling in React applications, which adds dynamically-computed styles at render time. It accepts a JavaScript object in camelCased properties rather than a CSS string. The style attribute is consistent with accessing the properties on DOM nodes in JavaScript.
Example
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')'
};
function HelloWorldComponent() {
}
Question - 94 : - How many ways can we style the React Component?
Answer - 94 : -
We can style React Component in mainly four ways, which are given below:
- Inline Styling
- CSS Stylesheet
- CSS Module
- Styled Components
Question - 95 : - Explain CSS Module styling in React.
Answer - 95 : -
CSS Module is a CSS file where all class names and animation names are scoped locally by default. It is available only for the component which imports it, and without your permission, it cannot be applied to any other Components. You can create CSS Module file with the .module.css extension.
Question - 96 : - What are Styled Components?
Answer - 96 : -
Styled-Components is a library for React. It is the successor of CSS Modules. It uses enhance CSS for styling React component systems in your application, which is written with a mixture of JavaScript and CSS. It is scoped to a single component and cannot leak to any other element in the page.
The styled-components provides:
- Automatic critical CSS
- No class name bugs
- Easier deletion of CSS
- Simple dynamic styling
- Painless maintenance
Question - 97 : - What are hooks in React?
Answer - 97 : -
Hooks are the new feature introduced in React 16.8 version that facilitates us to use state and other React features without writing a class.
See the following example of useState hook:
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
You clicked {count} times
Click on this button
);
}
Question - 98 : - What are the rules you should follow for the hooks in React?
Answer - 98 : -
We have to follow the following two rules to use hooks in React:
- You should call hooks only at the top level of your React functions and not inside the loops, conditions, or nested functions. This is used to ensure that hooks are called in the same order each time a component renders, and it also preserves the state of hooks between multiple useState and useEffect calls.
- You should call hooks from React functions only. Don't call hooks from regular JavaScript functions.
Question - 99 : - What are forms in React?
Answer - 99 : -
In React, forms are used to enable users to interact with web applications. Following is a list of the most common usage of forms in React:
- Forms facilitate users to interact with the application. By using forms, the users can communicate with the application and enter the required information whenever required.
- Forms contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc., that can make the application more interactive and beautiful.
- Forms are the best possible way to take inputs from the users.
- Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc.
Question - 100 : - In which cases do error boundaries not catch errors?
Answer - 100 : -
Following are some cases in which error boundaries don't catch errors:
- Error boundaries don't catch errors inside the event handlers.
- During the server-side rendering.
- In the case when errors are thrown in the error boundary code itself.
- Asynchronous code using setTimeout or requestAnimationFrame callbacks.