inile stlyes wont work on React destructured props how to fix?

Question

Hello i am making a circle component and I am making inline css with props with an absolute value yet the props don't work with the component.

the css

.circle{
    background-color: brown;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    display: grid;
}

the jsx

const Cirlce = ({
color ='red',
 bottom='unset',
  right='unset',
   left='unset',
     top='unset',
       index,
        children
}) => {
    return ( 
        <>
        <div className="circle" style={{
backgroundColor: {color}, 
 bottom: {bottom} , 
  left: {left} , 
   right: {right} , 
    top: {top} , 
     zIndex : {index}
}} >{children}</div>
        </>
     );
}
 

Answer 1

I haven't tested it, but I believe the way you're using the props is incorrect. For example, if you pass "unset" to the bottom prop, it will be interpreted as: bottom: {bottom: "unset"}, which is not what you intend to do. The correct way is as follows:

const Cirlce = ({
    color ='red',
    bottom='unset',
    right='unset',
    left='unset',
    top='unset',
    index,
    children
}) => {
    return ( 
        <>
            <div className="circle" style={{
                backgroundColor: color, 
                bottom: bottom, 
                left: left, 
                right: right, 
                top: top, 
                zIndex: index
            }}>{children}</div>
        </>
     );
}

An even better way of doing this is as follows, since the object key and value variable are of the same spelling:

const Cirlce = ({
    color ='red',
    bottom='unset',
    right='unset',
    left='unset',
    top='unset',
    index,
    children
}) => {
    return ( 
        <>
            <div className="circle" style={{
                backgroundColor: color, 
                bottom, 
                left, 
                right, 
                top, 
                zIndex: index
            }}>{children}</div>
        </>
     );
}