Combine two objects in react, no success so far

Question

I'm trying to combine two object together without any luck... I'm using the spread operator as you should in es6. I'm pretty sure it has something to do with useState. I will start by showing you the console.logs from my objects then the code :)

CONSOLE.LOGS

Object #1:

Object #2:

After combining the objects and logging the combined result I only get Object #1 like this:

MY CODE

const PortfolioComponent = () => {

const [clickedElement, setClickedElement] = useState({})
const [stockObject, setStockObject] = useState({})
const [stockData, setStockData] = useState({})

const getStock = () => {
    axios.request(stock)
    .then( res => {
      console.log("2. Object #2 from API: ", res.data)
      setStockData(res.data) // HERE I SET THE OBJECT FROM MY API CALL
    })
    .catch( error => {
      console.error(error);
  }

  const handleOpen = name => { // In this function i call the api function and combine the two objects.
    
    let findClickedStock = props.stocksArray.find(item => item.ticker === name)
    setClickedElement(findClickedStock)
    getStock();
    console.log("1. Object #1: ", findClickedStock)

    setTimeout(() => { // Waitning for the api to fetch
      setStockObject({...findClickedStock, ...stockData}) // Here i combine the two objects, no success
      console.log("3. Combined object - Only gets Object #1...", stockObject)
    }, 2000);

    setOpen(true);
  };
 
}

export default PortfolioComponent;

Do you get the same results if you log `{...findClickedStock, ...stockData}` directly? — Ted Brownlow, Jan 22 '21 at 15:02
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Hamza El Aoutar, Jan 22 '21 at 15:06
you dont need to use setTimeout for waiting api result. Just return a promise from getStock and it in handler like getStock().then(res => {...}); — poltorin, Jan 22 '21 at 15:18
@poltorin I know I can do that but cant figure out how really, so this is a fast resulotion :p Can you show me how i can proceed? — gospecomid12, Jan 22 '21 at 15:27

score 2 · Answer 1 · answered Jan 22 '21 at 15:06

From the Hooks API Reference:

Note Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Also, check out useReducer which is generally recommended for managing state with multiple sub-values.

score 1 · Accepted Answer · edited Jan 22 '21 at 15:36

1

const getStock = () => {
  return axios.request(stock)
  .then( res => res.data)
  .catch( error => {
    console.error(error);
}

const handleOpen = name => { // In this function i call the api function and combine the two objects.
  
  let findClickedStock = props.stocksArray.find(item => item.ticker === name)
  setClickedElement(findClickedStock)

  console.log("1. Object #1: ", findClickedStock)

  getStock().then((dataFromStockApi) => {
    setStockObject({ ...dataFromStockApi, ...findClickedStock });
  });

  setOpen(true);
};

edited Jan 22 '21 at 15:36

Dharman

30,962
25
85
135

answered Jan 22 '21 at 15:31

poltorin

284
1
4
13

Now everything works, just had to add a return before res.data in my api call :D Thanks everyone. – gospecomid12 Jan 22 '21 at 15:57

Combine two objects in react, no success so far

2 Answers2