[Solved]-How to render a div component multiple times with different background color and text in React?-Reactjs

You need to add props to BoxOne component

import React from "react";
import styles from "./BoxOne.css";

function BoxOne({style={}, label=''}) {
    return(
        <div id="boxOneContainer" style={style}>
            <p className="boxOneText">{label}</p>
        </div>
    );
}

export default BoxOne;

Then you can use it in the parent component like this:

import React from "react";
import "./Canvas.css";
import Workpanel from "../components/Workpanel";
import BoxOne from "../components/BoxOne";

class Canvas extends React.Component {
    render () {
        return(
            <div>
                <Workpanel />
                <div className="canvasContainer">
                    <div className="topicPlanner">
                        <p>Topic Planner</p>
                        <div className="topicVl"></div>
                    </div>
                    <BoxOne text="Box One" /> 
                    <BoxOne text="Box One Rendered Again" style={{color: '#0F0', top: '178px', left: '605px'}} /> 
                </div>   
            </div>   
        )
    };
}

export default Canvas;

Altough at this point, you probably want to change the name of the component from BoxOne to Box...

Since you have five Boxes, it will be cleaner to use an array like this:

const boxes = [
  { label: 'box1', style: {} },
  { label: 'box2', style: {left: '100px'} },
  { label: 'box3', style: {left: '200px'} },
  { label: 'box4', style: {left: '300px'} },
  { label: 'box5', style: {left: '400px'} },
];

class Canvas extends React.Component {
    render () {
        return(
            <div>
                <Workpanel />
                <div className="canvasContainer">
                    <div className="topicPlanner">
                        <p>Topic Planner</p>
                        <div className="topicVl"></div>
                    </div>
                   {boxes.map(box => (
                     <BoxOne label={box.label} style={box.style} key={box.label} /> 
                    )}
                </div>   
            </div>   
        )
    };
}

export default Canvas;

For more info about props, please read https://reactjs.org/docs/components-and-props.html