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 need to use spread syntax to copy the font object properties too. Also while trying to update current state based on previous, use the callback pattern

 { 
    setStyle(prevStyle => ({
        ...prevStyle,
        font: { ...prevStyle.font, align: event.target.value }
    }));
    console.log(style);
  }}
/>