I write the code like below and

<p className="scheduled_p">{schedule.mode.rgb_color}</p>

I got the color data like the following photo.

enter image description here

However, I want to show like the picture below

(how I call this? color something? it's not color picker)

enter image description here

The picture is the screen of the mobile app, and I would like the web app to have the same design as the mobile app as much as possible.

Is such an expression possible in React.js?

If it is possible, how?

Json

"mode": {
    "rgb_color": [
        255,
        255,
        255
    ],
}

React.js

          {schedules.map(schedule => (
            <div className="each_scheduled" key={schedule.id}>
              <div>
                <p className="scheduled_p">Color</p>
                <p className="scheduled_p">{schedule.mode.rgb_color}</p>
              </div>
            </div>
          ))}

CodePudding user response：

You can do like that:

<div>
   <p className="scheduled_p">Color</p>
   <div className="color_container" style={{ backgroundColor: convertToColor(schedule.mode.rgb_color) }} />
</div>

your css file:

color_container {
 width: 24px;
 height: 24px;
 border-radius: 50%;
}

convertToColor function:

const convertToColor = ([r, g, b]) => {
 return `rgb(${r}, ${g}, ${b})`;
};