Give color customization ability to users

Question

I'm building an app-building tool and giving users the ability to customize their app appearance.

So based on user selection, I am immediately giving a preview of appearance besides color settings. I'm using CSS cascading and properties that users can't customize, I'm passing it via className= so and so and properties that can be customized, I'm doing that via in-line style.

It's not working.

Border value passed via in-style is not working as I can't see style element in the console.log at the respective div.

Also, I am not sure whether this is the right approach(I'm new to programming). Could someone help me fix this?

  const [inputValue, setInputValue] = useState({
        borderColor: "",
        borderThinkness: "",
        background: "",
        fontColor:""
    }

    const handleColorChange =({ currentTarget: input })=>{
        const data = inputValue
        data[input.name] = input.value;
        setInputValue(data);
     }

const styleborder={
    border: ` ${inputValue.borderThinkness } solid ${inputValue.borderColor}`
}


    return (
        <div className="previewSide">
            <div style={styleborder} className="box boxextend">
       <div>
    

     <div className="configurationSide">
     <input onChange={handleColorChange} type="color" id="borderColor" name="borderColor"></input>
</div>

Answer 1

instead of:

setInputValue(data);

Do this:

if you want to merge with previous data

setInputValue((prev) => ({ ...prev, ...data }));

if you want to set new data

setInputValue(() => ({ ...data }));