pass color as prop to child to change background react

Question

I am trying to pass this colour picker as a prop to another component to change the background.

Parent

<li className=" grid cursor-pointer py-3 justify-items-center border-box lg:rounded-l-full lg:w-32 w-[96px] hover:text-white hover:bg-sky-400 duration-700  search dropbtn">
   <input 
     className='bg-inherit rounded-full' 
     type="color" 
     value={color}
     color={color}
     onChange={(e) =>{
       setColor(e.target.value)
     }} />
</li>

and I want to pass it to:

return (
    <div className="container">
      <div ref={ref} className="resizeable" style={{backgroundColor: `${setColor}`}} >
        <div ref={refLeft} className="resizer resizer-l"></div>
        <div ref={refTop} className="resizer resizer-t"></div>
        <div ref={refRight} className="resizer resizer-r"></div>
        <div ref={refBottom} className="resizer resizer-b"></div>
      </div>
    </div>
  );
}

Answer 1

are you using state hook ? if so it should be color in place of setColor in style prop and i cant figure out what you are trying to do. if you just want to change bg color simply try this i am assuming to want to pass prop to navbar then your navbar component should look like

export default function Navbar(props){
<ul>
<li style={{backgroundColor:`${props.bgcolor}`}}>link</li>
</ul>
}

now simply use it in index.js or where you want like

<Navbar bgcolor='red'/>

also do tell me if i misinterpreted the question