How React PropTypes allow different type for one prop?
- PropTypes does not allow different types for one prop
- You need to define separate PropTypes for each type
- You can use PropTypes.oneOfType()
You can use PropTypes.oneOfType() to allow a prop to have multiple possible types. For example, you can define a prop that can be either a string or a number like this: 'myProp: PropTypes.oneOfType([PropTypes.string, PropTypes.number])'. This will allow the prop to accept values of either type, and will throw a warning if a value of a different type is passed in.
What is "key" prop and what is the benefit of using it in arrays of elements?
- A prop that determines the order of elements in an array
- A prop that provides a unique identifier for each element in an array
- A prop that specifies the position of an element in an array
- A prop that specifies the type of each element in an array
The "key" prop in React is a special prop that provides a unique identifier for each element in an array of elements. It is used to optimize the performance of rendering by allowing React to identify which elements have changed, and to update only those elements instead of re-rendering the entire list. The "key" prop should be a unique and stable identifier for each element, such as an ID or index.
How to focus an input element on page load?
- Use the autoFocus attribute on the input element
- Use the focus() method in componentDidMount()
- Use the onFocus() event in the render method
- Use the onLoad() event on the body element
In React, you can focus an input element on page load by using the "focus()" method in the "componentDidMount()" lifecycle method. This will set the focus to the input element after the component has been mounted in the DOM. For example: componentDidMount() { this.myInput.focus(); }.
When component props defaults to true?
- When the prop is undefined
- When the prop is null
- When the prop is an empty string
- When the prop is zero
In React, a component's props will default to true if the prop value is undefined. This can happen if the prop is not passed explicitly in the component declaration or if it is explicitly set to undefined in the parent component. To avoid this behavior, default values can be set for props using the defaultProps property in the component class.
How to pass params to history.push method in React Router v4?
- Pass a string with the route path and query parameters
- Pass an object with a "params" property
- Pass an object with a "query" property
- Pass an object with a "state" property
In React Router v4, you can pass params to the history.push method by using the "state" property of the location object. This property can contain any data that you want to pass along with the route, such as query parameters, form data, or session information. For example: this.props.history.push({ pathname: '/new-route', state: { foo: 'bar' } });.
What is CRA and its benefits?
- A boilerplate for creating React applications
- A build tool for React applications
- A testing framework for React
- A tool for managing React dependencies
CRA stands for Create React App, which is a boilerplate for creating React applications. It provides a pre-configured setup for building, testing, and deploying React applications, allowing developers to focus on writing code rather than setting up the build toolchain. Some benefits of using CRA include easy setup, automatic configuration, and a built-in development server.
What are stateful components?
- Components that are only used for layout
- Components that don't use any state
- Components that maintain state
- Components that only have props
Stateful components, also known as class components, are components that maintain state. Stateful components are useful for creating more complex UI components that need to maintain state, but they are more difficult to test than stateless components.
Do I need to keep all my state into Redux? Should I ever use react internal state?
- Yes, you should always use Redux to manage all of your application state
- No, you should never use Redux and always use React internal state
- It depends on the complexity and size of your application
- It depends on whether you are using class or functional components
Whether or not to use Redux to manage state in a React application depends on the complexity and size of the application. For small and simple applications, it may be sufficient to use React's internal state management. However, for larger and more complex applications, Redux can be a helpful tool for managing application state.
Is the ref argument available for all functions or class components?
- Yes, for all components
- No, only for class components
- No, only for function components
The ref argument is only available for class components in React. Function components do not have an instance, so refs cannot be attached to them. Refs can be attached to DOM elements, class components, and functional components that are created using the forwardRef() method.
What is the difference between setState and replaceState methods?
- There is no difference, they both update component state
- replaceState is deprecated in React v16, while setState is still supported
- setState is used in class components, while replaceState is used in functional components
- setState merges the new state with the old state, while replaceState overwrites the old state
In React, the "setState" method is used to update component state, and it merges the new state with the old state. The "replaceState" method is similar, but it overwrites the old state completely with the new state. However, "replaceState" is deprecated in React and should not be used. Instead, you should use the "setState" method to update state in a React component.