React - loop example

Question

In this example, a prompts array with dummy data, and then used the map function to iterate through the array and generate a .prompt-box element for each item. The key prop is set to the index for React to keep track of each element efficiently. You can customize the dummy data or add more items to the prompts array as needed.

import React from 'react';

const ScrollableMain = () => {
  // Dummy data for the loop
  const prompts = [
    { title: 'Title of prompt 1', description: 'Lorem ipsum dolor sit amet 1' },
    { title: 'Title of prompt 2', description: 'Lorem ipsum dolor sit amet 2' },
    { title: 'Title of prompt 3', description: 'Lorem ipsum dolor sit amet 3' },
    // Add more items as needed
  ];

  return (
    <main className="buddy-main">
      {/* Your scrollable main content goes here */}
      <div className="buddy-main-container">
        <div className="prompt-container">
          <div className="prompt-group">
            {prompts.map((prompt, index) => (
              <div key={index} className="prompt-box">
                <div className='prompt-title'>{prompt.title}</div>
                <div className='prompt-desc'>{prompt.description}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
};

export default ScrollableMain;

 

Answer 1

import React from 'react';

const SuggestionList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} className="suggestion-bubble">
          <div className="bubble">{item}</div>
        </div>
      ))}
    </div>
  );
};

export default SuggestionList;