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

If you have multiple values in a nested object, try this method below:

setPost({
  ...post,
  postDetails: {
    ...post.postDetails,
    [event.target.name]: event.target.value,
  },
});