Q1. How do you render lists in React?
You can use the JavaScript map() function to transform an array of data into an array of JSX elements. For example: const listItems = items.map(item => {item} ); Then render {listItems} inside a container.
Q2. Why do we need keys when rendering lists?
Keys help React identify which items have changed, been added, or removed. They give elements a stable identity, enabling efficient updates. Without keys, React may re-render the entire list, causing performance issues and potential bugs.
Q3. What can be used as a key?
Keys should be unique among siblings. Ideally, use a string that uniquely identifies the item, like an ID from your data. Using array indexes is not recommended if the list can change (reorder, add/remove) because it can cause rendering issues.
Q4. What happens if you don't provide a key?
React will warn you in the console and may use the array index as a fallback key. This can lead to unnecessary re-renders and problems with component state in list items.
Q5. Can keys be passed as props?
Keys are not passed as props to components. They are used internally by React. If you need to access the same value inside the component, you should pass it as a separate prop.