React - loop example

0 votes
309 views
added Jan 18 in React by lcjr Lieutenant (12,010 points)
edited Jan 31 by lcjr

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;

 

1 Response

0 votes
responded Jan 31 by lcjr Lieutenant (12,010 points)
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;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...