how to set useState data on an object

Question

I'm trying to set an object with useState, however I only get in initial value, can anyone see what I'm doing wrong, the object in question is setWishlist,

const CenterModal = props => {
  const [modalData, setModalData] = useState({
    color: 'red',
    title: '',
    description: ''
  });

const onSubmit = e => {
    e.preventDefault();
    props.onHide();
    const wishlistData = {
      color: modalData.color,
      title: modalData.title,
      description: modalData.description,
    };

    //Pass the data to Wishlist component
    props.wishlistdata(wishlistData);
    console.log('wishlistData: ', wishlistData);
  };
 }

const Wishlist = props => {

    const [wishList, setWishList] = useState({
    color: 'red',
    title: '',
    description: ''
  });

  const onWishListDataReceived = wishListData => {
    setWishList({
      color: wishListData.color
      title: wishListData.title,
      description: wishListData.description,
    });
    console.log('wish list data is: ', wishList);
  };

return(    
   <CenterModal
      title="EDIT WISHLIST ITEM"
      show={modalShow}
      onHide={modalClose}
      wishlistdata={e => onWishListDataReceived(e)}
   />
 )
}

in the console.log I only get the initial state,

duplicate of: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — Amit Chauhan, Jun 05 '19 at 17:11
Possible duplicate of [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Amit Chauhan, Jun 05 '19 at 17:11
What is going on with your code? Do you make components inside a component? — Dennis Vash, Jun 05 '19 at 17:31
Ok so if `Wishlist` calls `CenterModal` what `CenterModal` renders? There is no return — Dennis Vash, Jun 05 '19 at 17:37
CenterModal renders a bootstrap modal with some form fields in it for color, title and description — akano1, Jun 05 '19 at 17:40

score 0 · Answer 1 · answered Jun 05 '19 at 17:14

I think the issue is because whenever you invoke the function you are not passing in an object with correct information as an argument. it is trying to access properties on the place holder so the correct info has to be passed when invoked, or it will just be undefined. Also don't think you need the square brackets around the keys.

score 0 · Accepted Answer · answered Jun 05 '19 at 18:05

0

I figured it out, Just for future reference,

I had to use useEffects like the following

useEffect(() => {
    console.log('wishlistdata is: ', wishList);
  }, [wishList]);

answered Jun 05 '19 at 18:05

akano1

40,596
19
54
67

how to set useState data on an object

2 Answers2