Cannot update a component while rendering a different component (DataCtxReader).

Developer Support
1

I have a prototype survey app that is recieving data from the page jsx. The page works but Im getting these warning errors in the console.

warning.js:30 Warning: Component Token colorBgBody of Layout is deprecated. Please use bodyBg instead.
warning.js:30 Warning: Component Token colorBgHeader of Layout is deprecated. Please use headerBg instead.
Warning: Cannot update a component (PlasmicSurveyStart) while rendering a different component (DataCtxReader).

Project - https://studio.plasmic.app/projects/7EvF5mCP1XCWq6U1kL1B4F/-/Survey-Start?arena_type=page&arena=avo3mvP4U6wD
Page container jsx
"// src/components/SurveySection1Container.jsx

import React from ‘react’;
import { useAuthenticated, useUserId } from ‘@nhost/react’;
import { useQuery } from ‘@apollo/client’;
import { GET_USER_AND_TEAMS } from ‘…/graphql/queries’; // Ensure this path is correct
import { PlasmicSurveyStart } from ‘…/components/plasmic/flow_insights/PlasmicSurveyStart’; // Import the generated Plasmic component

function SurveySection1Container() {
const isAuthenticated = useAuthenticated();
const userId = useUserId();

const { loading, error, data } = useQuery(GET_USER_AND_TEAMS, {
variables: { personId: userId },
skip: !isAuthenticated || !userId,
});

const personData = data?.Persons_by_pk;

// — Start: Logging for Debugging —
console.log(“Fetched personData:”, personData);
console.log(“isAuthenticated:”, isAuthenticated);
console.log(“loading:”, loading);
console.log(“error:”, error);
// — End: Logging for Debugging —

// — Initialize data variables with default empty values —
// These variables will hold the data fetched from Nhost or default empty values.
let givenNameValue = ‘’;
let familyNameValue = ‘’;
let personalEmailValue = ‘’;
let workEmailValue = ‘’;
// Removed organizationNameValue, orgSpecificEmailValue, reportingManagerNameValue, initialTeamsValue
// if they are not used on the SurveyStart page

// — Process fetched data if available —
if (personData) {
givenNameValue = personData.FirstName || ‘’;
familyNameValue = personData.LastName || ‘’;
personalEmailValue = personData.Personal_Email || ‘’;
workEmailValue = personData.Person_Organization_Affiliations?.[0]?.Work_Email || ‘’;

// If organization and team data are NOT used on this page,
// you can also remove their mapping here to keep the code cleaner,
// but leaving them won't cause issues if they aren't passed.
// For completeness, if you strictly only need them for other pages/components:
// organizationNameValue = personData.Person_Organization_Affiliations?.[0]?.Organization?.[0]?.Organization_Name || '';
// orgSpecificEmailValue = personData.Person_Organization_Affiliations?.[0]?.Org_Specific_Email || '';
// const reportingRelationship = personData.managerialRelationshipsByPersonId?.[0];
// const reportingManager = reportingRelationship?.personByManagerId;
// reportingManagerNameValue = reportingManager ? `${reportingManager.FirstName || ''} ${reportingManager.LastName || ''}`.trim() : '';
// initialTeamsValue = personData.Person_Team_Roles.map(...);

}

// — Conditional rendering based on loading/auth state —
if (!isAuthenticated) {
console.log(“DEBUG: User not authenticated. Returning early.”);
return

Please log in to access the survey.

;
}

if (loading) {
console.log(“DEBUG: Query is loading. Returning early.”);
return

Loading user data…

;
}

if (error) {
console.error(“DEBUG: Query error:”, error);
return

Error loading user data. Please try again.

;
}

// — Start: Logging data being passed —
console.log(“DEBUG: Data being passed to PlasmicSurveyStart props:”, {
personBasicInput: { // Log the structure as it will be passed
givenNameState: givenNameValue,
familyNameState: familyNameValue,
personalEmailState: personalEmailValue,
workEmailState: workEmailValue,
},
// Removed organizationData and teamData from this log
});
// — End: Logging data being passed —

return (
<PlasmicSurveyStart
// Pass only the ‘personBasicInput’ object prop,
// as it’s the only data group used on the SurveyStart page.
personBasicInput={{
givenNameState: givenNameValue,
familyNameState: familyNameValue,
personalEmailState: personalEmailValue,
workEmailState: workEmailValue,
}}
// REMOVED organizationData and teamData props from here,
// as the SurveyStart page does not use them directly or via components.
/>
);
}

export default SurveySection1Container;"