Add more questions and remove `setState`

src/data/question-groups/react/content/create-portal.md

@@ -0,0 +1,60 @@
+`createPortal` is a method on the `ReactDOM` object. It is used to render a React element into another DOM element outside of the parent component. This is useful for cases like modals, popups, or tooltips where you want the component to break out of its container.
+
+```js
+ReactDOM.createPortal(child, container);
+```
+
+The first argument (`child`) is any renderable React child, such as an element, string, or fragment. The second argument (`container`) is a DOM element.
+
+The `Modal` component below is a simple example of a modal component that uses `createPortal` to render its children into a DOM element with the id `root`. The `Modal` component is rendered as a child of the `App` component, but the modal itself is rendered outside of the `App` component.
+
+```js
+import { createPortal } from 'react-dom';
+
+export function Modal({ isOpen, onClose, children }) {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: 'white',
+        padding: '20px',
+        zIndex: 1000,
+      }}
+    >
+      <button onClick={onClose} aria-label="Close Modal">
+        Close
+      </button>
+      {children}
+    </div>,
+    document.getElementById('root')
+  );
+}
+```
+
+The `Modal` component can be used like this:
+
+```js
+import { useState } from 'react';
+import { Modal } from './modal';
+
+export function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>Open Modal</button>
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <h1>Modal Title</h1>
+        <p>Modal Content</p>
+      </Modal>
+    </div>
+  );
+}
+```

src/data/question-groups/react/content/set-state.md

@@ -1,17 +0,0 @@
-`setState` method is asynchronous by nature. It does not immediately mutate the state but creates a pending state transition. Accessing state after calling this method can potentially return the existing value. 
-
-To avoid this, pass a callback function as a second argument to the `setState` method. This callback function will be executed once the state is updated.
-
-```js
-function handleClick() {
-  // `username` is some state variable
-  console.log(username);
-  setUsername('John Doe');
-  console.log(username); // still the old value
-    
-  // pass a callback function as a second argument
-  setUsername('John Doe', () => {
-    console.log(username); // now it will have the updated value
-  });
-}
-```

src/data/question-groups/react/react.md

@@ -52,11 +52,6 @@ questions:
     topics:
       - 'State'
       - 'Beginner'
-  - question: What is the purpose of callback function as an argument of setState()?
-    answer: set-state.md
-    topics:
-      - 'State'
-      - 'Beginner'
   - question: What is the difference between controlled and uncontrolled components?
     answer: controlled-vs-uncontrolled.md
     topics:
@@ -96,8 +91,8 @@ questions:
       - 'Intermediate'
   - question: What is React Fiber?
     answer: |
-        React fiber is the reconciliation engine that replaced the core algorithm in React v16. It is a rewrite of the core algorithm, responsible for scheduling what gets rendered on screen. It is a set of algorithms for efficiently updating the UI.
+      React fiber is the reconciliation engine that replaced the core algorithm in React v16. It is a rewrite of the core algorithm, responsible for scheduling what gets rendered on screen. It is a set of algorithms for efficiently updating the UI.
-        Here is a [bit-outdated but quite good article about React Fiber](https://github.com/acdlite/react-fiber-architecture).
+      Here is a [bit-outdated but quite good article about React Fiber](https://github.com/acdlite/react-fiber-architecture).
     topics:
       - 'Core'
       - 'Advanced'
@@ -179,4 +174,17 @@ questions:
     topics:
       - 'Core'
       - 'Advanced'
+  - question: What are fragments in React?
+    answer: |
+      React doesn't allow returning multiple elements from a component. You can use fragments to return multiple elements.
+      
+      Fragments in React allow for a group of elements to be returned from a component's render method without adding an extra node to the DOM. They are useful when you want to return multiple elements without wrapping them in a parent container.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is `createPortal`?
+    answer: create-portal.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
 ---