1. Difference between display block and display flex
2. What is flex what is the use of it
3. Which ecmascript you are using?
4. What is the new functionality in ES6.

Absolutely, here's a concise breakdown:

1. **Difference between `display: block` and `display: flex`:**
   - `display: block`:
     - Elements take up the full width available and start from a new line.
     - Block-level elements stack vertically.
   - `display: flex`:
     - Creates a flex container allowing flexible layouts of its children.
     - Flex items can be arranged horizontally or vertically with flexible widths and heights.

2. **What is `flex`, and what is its use:**
   - Flexbox is a layout model in CSS designed for more efficient alignment and distribution of space among items in a container.
   - It allows for easier and more complex layouts compared to traditional CSS methods.
   - Flexbox provides properties to manage the arrangement, alignment, and distribution of elements within a container.

3. **Which ECMAScript version are you using:**
   - ES6 (ECMAScript 2015) or newer versions are commonly used in modern web development.

4. **New functionality in ES6:**
   - Arrow functions, const and let declarations, template literals, destructuring assignment, default parameters, classes, and modules are some notable features introduced in ES6.

5. Create React component such that you have one input field and submit button after writing some text in input field and after submitting it should get displayed in list format with previous one like todo app?

import React, { useState } from 'react';

function TodoList() {
  const [inputText, setInputText] = useState('');
  const [todos, setTodos] = useState([]);

  const handleInputChange = (event) => {
    setInputText(event.target.value);
  };

  const handleSubmit = () => {
    if (inputText.trim() !== '') {
      setTodos([...todos, inputText]);
      setInputText('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={handleInputChange}
        placeholder="Enter your todo"
      />
      <button onClick={handleSubmit}>Submit</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;