title: React Create a Horizontal Divider with Text In between
body: <p>I need to create a React component that is a Horizontal Divider with a content like text In between. All the resources I have online is unable to help me get this done. I tried a material-ui divider by creating a Divider component and placing my text in-between like the example below:</p>
  
  <pre><code>&lt;Divider&gt;Or&lt;/Divider&gt;
  </code></pre>
  
  <p>But I get the error:</p>
  
  <pre><code>hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
  </code></pre>
  
  <p>I need to achieve this in the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/SbaIK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SbaIK.png" alt="Display a horizontal Divider"></a></p>
  
  <p>Any help will be appreciated.</p>
  
  <p>These are my codes below:</p>
  
  <pre><code> import React from 'react';
   import { makeStyles } from '@material-ui/core/styles';
   import List from '@material-ui/core/List';
   import Divider from '@material-ui/core/Divider';
  
   const useStyles = makeStyles((theme) =&gt; ({
     root: {
     width: '100%',
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
   }));
  
   export default function ListDividers() {
   const classes = useStyles();
  
   return (
   &lt;List component="nav" className={classes.root} aria-label="mailbox 
   folders"&gt;
  
    &lt;Divider&gt;Or&lt;/Divider&gt;
  
    &lt;/List&gt;
    );
   }
  </code></pre>