I have some data (objects) that live in their own file (Origin.js).

This data is being exported using the spread operator within another object named `OriginState`:

**Origin.js**

```
//info
const info = {
    title: '',
    year: '',
};

//images
const images = {
    logo: '',
    heroImage: '',
};

//text
const text = {
    header: '',
    body: '',
};

export const OriginState = {
    ...info,
    ...images,
    ...text,
};

```

I am importing my `OriginState` object in another file and using it as `state` for my app like this:

**OtherFile.js**

```
import { OriginState } from './Origin.js';

    const [state, setState] = useState({
        ...OriginState,
    });

```

Here is an example handler where I am using this state to update some specified state values in an input later:

```
const handleChange = (e) => {
    const { name, value } = e.target;
    setState((state) => ({
        ...state,
        [name]: value,
    }));
};

```

Now, my question is... Is it incorrect to store `state` like this?

Additionally, am I using `setState` incorrectly in my handler function?

In most cases I've seen state declared and updated like this which is obviously easier to read:

```
const [count, setCount] = useState(0);
setCount(count + 1)

```

But I have a lot of `state` and didn't think it would be a good idea to have multiple `setState` hooks.

Is there a better way to do this? What I currently have just feels wrong.