Creating objects from states

Question

I have two states:

  const [firstState, setFirstState]   = useState(6.5)
  const [secondState, setSecondState] = useState(3.5)

I wish to combine these two states into an object, like this:

  const [myObject, setMyObject] = useState({
    first: {firstState},
    second: {secondState}
  });
//NOTE: This does not compile when i try to create state-object with state values.

I then send the object to a child-component as a prop which is later used for display.

<ChildComponent objectToChild={myObject}/>

What's the best pratice to combine states into an object?

Why? why you have to do that ? why you don't use two variable in one useState and pass this for ChildComponent — thortsx
– thortsx, Commented Oct 1, 2019 at 13:47
You can create this as an object so it would be useState({ firstState: 6.5, secondState: 3.5 }); and later use this as an simply js object — Freestyle09
– Freestyle09, Commented Oct 1, 2019 at 13:52
@ArastoSahbaei Yes you can still update the state do it like setObject({...myObject, firstState: 20}) this will change only the firstState part of the object — harisu
– harisu, Commented Oct 1, 2019 at 14:07

Chotala Paresh · Accepted Answer · 2019-10-01 15:12:58Z

1

Their are different option

1. Using the useState Hook

const [myObject, setMyObject] = useState({
    first: firstState,
    second: secondState
  });

modify state

setMyObject({...myObject, firstState })

2. Using the useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

const initialState = {
    first: 'name',
    second: 'surname'
};

const reducer = (state, action) => {
  switch (action) {
    case 'first': return { ...state, first: state.first };;
    case 'second': return { ...state, second: state.second };;
    default: throw new Error('Unexpected action');
  }
};

use it like

const [state, dispatch] = useReducer(reducer, initialState);

answered Oct 1, 2019 at 15:12

Chotala Paresh

5664 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Freestyle09 · Accepted Answer · 2019-10-01 17:23:24Z

0

You can simply create an object as an argument in useState method, so It would be like this:

const [user, setUser] = useState({});

and call setUser method like this:

setUser(prevState => {
   return {...prevState, [user.firstState]: 6.5}
}

Read more about useState hook here: https://pl.reactjs.org/docs/hooks-reference.html#usestate

answered Oct 1, 2019 at 17:23

Freestyle09

5,57810 gold badges59 silver badges92 bronze badges

Collectives™ on Stack Overflow

Creating objects from states

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related