How to Draw a Red Horizontal Line in React?

Sometimes, we want to draw a red horizontal line in React.

In this article, we’ll look at how to draw a red horizontal line in React.

Draw a Red Horizontal Line in React

To draw a red horizontal line in React, we can add an hr element that has a height and background color.

For instance, we write:

import React from "react";

const ColoredLine = ({ color }) => (
  <hr
    style={{
      color,
      backgroundColor: color,
      height: 5
    }}
  />
);
export default function App() {
  return (
    <div>
      <ColoredLine color="red" />
    </div>
  );
}

We create the ColoredLine component that takes the color prop.

And we set the style prop to an object with the color, backgroundColor and the height properties.

backgroundColor makes the line set to color.

Now we should see the line displayed.

Conclusion

To draw a red horizontal line in React, we can add an hr element that has a height and background color.