title: How to render a div component multiple times with different background color and text in React?
body: <p>I have the BoxOne div with yellow pastel color with a p tag inside it that says &quot;Box One&quot;. It is a React Component with top: 178px and left: 426px position. Instead of hardcoding a BoxTwo component, how can I use the same BoxOne component to render again but a with a different color and text, at a different position? I'm not planning for conditional rendering, just all appearing at the same time.</p>
  <p>Say, orange, with 'Box One Rendered Again' p tag and top: 178px and left: 605px.</p>
  <p>There will be five such boxes in a row, all with different color and values. Sharing the codes below:</p>
  <p>a. React code for Canvas where BoxOne div is imported:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Canvas.css&quot;;
  import Workpanel from &quot;../components/Workpanel&quot;;
  import BoxOne from &quot;../components/BoxOne&quot;;
  
  class Canvas extends React.Component {
      render () {
          return(
              &lt;div&gt;
                  &lt;Workpanel /&gt;
                  &lt;div className=&quot;canvasContainer&quot;&gt;
                      &lt;div className=&quot;topicPlanner&quot;&gt;
                          &lt;p&gt;Topic Planner&lt;/p&gt;
                          &lt;div className=&quot;topicVl&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;BoxOne /&gt; 
                  &lt;/div&gt;   
              &lt;/div&gt;   
          )
      };
  }
  
  export default Canvas;
  </code></pre>
  <p>b. React code for BoxOne div</p>
  <pre><code>import React from &quot;react&quot;;
  import styles from &quot;./BoxOne.css&quot;;
  
  function BoxOne() {
      return(
          &lt;div id=&quot;boxOneContainer&quot;&gt;
              &lt;p className=&quot;boxOneText&quot;&gt;Box One&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  
  export default BoxOne;
  </code></pre>
  <p>c. Here's how I want it to look like:</p>
  <p><a href="https://i.stack.imgur.com/1nYso.png" rel="nofollow noreferrer">BoxOne Screenshot</a></p>