BuilderIO / BuilderIO/mitosis

Unable to access "state" property within an object

Open
#910 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.4k
Forks
671
PR merge metrics
No merged PRs in 30d

Description

### I am interested in helping provide a fix!

Yes

### Which generators are impacted?

- [X] All
- [ ] Angular
- [ ] HTML
- [ ] Qwik
- [ ] React
- [ ] React-Native
- [ ] Solid
- [ ] Stencil
- [ ] Svelte
- [ ] Vue
- [ ] Web components

### Reproduction case

https://mitosis.builder.io/?outputTab=E4UwhgxgLkA%3D&code=KYDwDg9gTgLgBAE2AMwIYFcA29noHYDGMAlhHnALICeAwhALaR7B4wAUYUEYAzgJRwA3gChhcOLkIkyE%2FEQCMbHg2AB5AEYArASPHiA9PrgR0MMKbjEecelZ7E8AczgA6HjFQxgYvQTLu4MExUAmB6FngAXjhlcI1NNw8vFyCQsIiAbh8AX1FxSSJScgKYACYlFXidHwMjAHdoAGtULnwEGrg%2FPADY4ABlJOA4aN74xM9gLL1O%2F3hU0PDWYZiVAYmU4IXMnLy4KGAYdChyNg6AHgRiADc4fQA%2BHz4s7KA%3D%3D%3D

### Expected Behaviour

When there's a javascript object structured like this e.g
```js
{
state: {
placement: 'some test'
}
}
```

mitosis code
```tsx
function funct1(someObj) {
const placement = someObj.state.placement;
}
```

should keep "state" in the output

e.g react
```tsx
function funct1(someObj) {
const placement = someObj.state.placement;
}
```

### Actual Behaviour

mitosis
```tsx
function funct1(someObj) {
// output is missing .state
const placement = someObj.state.placement;
}
```

outputs (react)
```tsx
function funct1(someObj) {
// output is missing .state
const placement = someObj.placement;
}
```

### Additional Information

There is a workaround which is to do this

mitosis
```tsx
function funct2(someObj) {
// workaround
const someState = someObj.state;
const placement = someState.placement;
}
```

react
```tsx
function funct2(someObj) {
// workaround
const someState = someObj.state;
const placement = someState.placement;
}
```

This seems to be an issue with all outputs (I see this same issue with angular as well)

Contributor guide

Open the contributing guide

Research direction

Open the linked Mitosis reproduction and compare the generated React and Angular output with the expected object access. Trace how the expression `someObj.state.placement` is handled across the generators. Done means `state` is preserved in the output for all affected generators, including the reported workaround case.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, react, typescript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.