Altinn / Altinn/app-frontend-react

Objects are not valid as a React child

Open
#783 0 comments 0 reactions 0 assignees View on GitHub
kind/bug org/svv
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Description

Rendering UI elements after data is inserted into the data model, then cleaning (parts of) the datamodel results in the front end crashing wiht error "Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead."

## To Reproduce
The bug can be preproduced on this branch of Transportloyvegarantier: https://altinn.studio/repos/svv/transportloyvegarantier/src/branch/not_valid_react_child

Add the following role (or remove the role check in the app) to the test user src\development\TestData\authorization\roles\User_1337\party_500700\roles.json
` {
"Type": "altinn",
"value": "A0294"
}`

Steps to reproduce
1. Start the app and open it with the user Sophie Salt representing Oslos Vakreste Borettslag
2. Write a valid organisation number in the field (for example "123456789")
3. Wait for the UI to render the previously hidden elements
4. Write an invalid organsation number in the field (for example "12345678")

## Expected behavior
Hide the UI elements that are governed by rule "1baba030-2c49-11ec-a883-e3e3ff3ab0d3"

## Screenshots

![skjermbilde 1](https://user-images.githubusercontent.com/36533358/162439128-fdb91faa-a4f0-4e1d-9ffe-84c4572a2bc0.png)
![skjermbilde 2](https://user-images.githubusercontent.com/36533358/162439140-040dad59-0911-4f24-baad-a418a9dc87ac.png)
![skjermbilde 3](https://user-images.githubusercontent.com/36533358/162439152-41f26e3c-efb3-4fc7-9250-7df6f0e04f78.png)

## Additional info
Tested in Edge on Windows 10
First reported in #studio-svv on Slack: https://altinn.slack.com/archives/C02ESDT071T/p1649253408138869

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the failure using the linked Transportloyvegarantier branch, the User_1337 role configuration in src\development\TestData\authorization\roles\User_1337\party_500700\roles.json, and the organisation-number steps. Trace the UI update after rule 1baba030-2c49-11ec-a883-e3e3ff3ab0d3 hides elements. Done means invalid input hides those elements without the React child crash.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.