How to get all of my state data just one line code with react hook?

Question

I just try to use react hook recently.

If I extends Componet, I declare my state like this:

  constructor(props) {
    super(props);

    // dummy state
    this.state = {
      focus: false
      name: 'test'
      image: ''
      avatarSource: '',
      imageBase: 'sfsafsfasf',
      imageLoader: null,
    }

If I want to send all of the state values, I will use ...this.state

just like:

sendStateFunction(...this.state);

If I use react hook, I declare my state like this:

const test = () => {

  const [name, setName] = useState('');
  const [image, setImage] = useState('');
  const [sex, setSex] = useState(0); 
  const [id, setId] = useState('');
}

But I have no idea how to send all of the state values just use one line code:

sendStateFunction();  // What should I type the arguments ?

ocheriaf · Accepted Answer · 2019-11-06 08:54:04Z

2

React let you define state object with multiple subvalues with hooks like that :

function DummyComponent(){
const [state, setState] = useState({ focus: false,
    name: 'test',
    image: '',
    avatarSource: '',
    imageBase: 'sfsafsfasf',
    imageLoader: null,})
// You can update it like that:
return <Button onClick={()=>setState(prevState=>{return {...prevState, newKey:1}})}>Click</Button>
}

Or you can use a reducer using the hook useReducer. All of those issues are stated in React hooks Documentation

answered Nov 6, 2019 at 8:54

ocheriaf

6104 silver badges11 bronze badges

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

1 Comment

Morton Over a year ago

Thanks. So I can use just like ...state in your example right ?

Collectives™ on Stack Overflow

How to get all of my state data just one line code with react hook?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related