How to render a div component multiple times with different background color and text in React?-CodePudding

I have the BoxOne div with yellow pastel color with a p tag inside it that says "Box One". 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.

Say, orange, with 'Box One Rendered Again' p tag and top: 178px and left: 605px.

There will be five such boxes in a row, all with different color and values. Sharing the codes below:

a. React code for Canvas where BoxOne div is imported:

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 /> 
                </div>   
            </div>   
        )
    };
}

export default Canvas;

b. React code for BoxOne div

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

function BoxOne() {
    return(
        <div id="boxOneContainer">
            <p className="boxOneText">Box One</p>
        </div>
    );
}

export default BoxOne;

c. Here's how I want it to look like:

BoxOne Screenshot

CodePudding user response：

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