How to draw a horizontal line in ReactJS

In this blog, we will learn how to draw a horizontal line in ReactJS and try to write code for it.

To draw a horizontal line in React, you can use the hr HTML element. Here’s an example of how to do it:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <hr />
    </div>
  );
}

export default App;

In the above code, we import the React library and define a function component named App. Within the return statement of the App component, we add a div element that contains an h1 element and an hr element.

The hr element is a self-closing tag that draws a horizontal line on the page. It creates a visual divider between content and can be used to separate sections of a web page.

Once you save the file, you should see a horizontal line displayed on your web page below the “Hello, world!” header.

That’s it! This is a simple example of how to draw a horizontal line in React.

To style the horizontal line in CSS, you can use the border property. Here’s an example of how to do it:

CSS:

hr {
  border: none;
  border-top: 2px solid black;
  margin: 20px 0;
}

In the above code, we select the hr element and apply the following styles:

border: none; removes the default border that is displayed by the hr element.
border-top: 2px solid black; adds a 2-pixel wide solid black line at the top of the hr element.
margin: 20px 0; sets a 20-pixel margin at the top and bottom of the hr element.

You can adjust the values of these properties to customize the appearance of the horizontal line to your liking. Once you save the CSS file, the hr element on your web page will be styled according to your CSS rules.