How can I draw red horizontal line in React

Question

How can I draw a horizontal line (hr) in a react component using dynamic color?

Here's what I have so far:

render {
    let color = 'red';
    return (
        <div> 
            There is a red HR
           <hr />
        <div>
    )
}

Answer 1

One way to set up the component:

const ColoredLine = ({ color }) => (
    <hr
        style={{
            color: color,
            backgroundColor: color,
            height: 5
        }}
    />
);

And then use it with:

<ColoredLine color="red" />

For a full breakdown on how to style <hr />, see http://www.sovavsiti.cz/css/hr.html

Answer 2

<hr  style={{
    color: '#000000',
    backgroundColor: '#000000',
    height: .5,
    borderColor : '#000000'
}}/>

Only adding the borderColor, to change the exact full-color change of <hr /> tag