React hooks: How do I update state on a nested object with useState()?

Question

I have a component that receives a prop that looks like this:

const styles = {
    font: {
        size: {
            value: \'22\',
            unit: \'px\'
           


        

Answer 1

you can update the styles in this manner

onChange={(event) => {
    const s = {...styles};
    s.font.align = event.target.value;
    setStyle(s);
    console.log(style);
}}