I changed to state variables as you suggested and it didnt solve the problem which is that Plasmic is not displaying data that I am sending to it from React scripts.
here is my project https://studio.plasmic.app/projects/7EvF5mCP1XCWq6U1kL1B4F/-/SurveyStart?arena_type=page&arena=avo3mvP4U6wD
Here is the console error messages “DEBUG: Data being passed to PlasmicSurveyStart props (external state names): {givenName: ‘Jim’, familyName: ‘Jones’, personalEmail: ‘jim@jonestown.com’, workEmail: ‘Jones Town’, organizationName: ‘’, …}
react-dom.development.js:86 Warning: React does not recognize the givenNameState
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase givennamestate
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at div
at div
at func (http://localhost:5173/src/components/plasmic/flow_insights/PlasmicSurveyStart.jsx:350:49)
at WithUsePlasmicAuthComponent (http://localhost:5173/src/components/plasmic/flow_insights/PlasmicSurveyStart.jsx:378:27)
at SurveySection1Container (http://localhost:5173/src/components/SurveySection1Container.jsx:25:27)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:5449:26)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:6182:3)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:6125:13)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:9111:3)
at Suspense
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_loader-react.js?v=646803cb:13496:16)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at PageParamsProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:433:22)
at SWRConfig$1 (http://localhost:5173/node_modules/.vite/deps/chunk-7KOZKNDX.js?v=646803cb:456:21)
at PlasmicQueryDataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-7KOZKNDX.js?v=646803cb:975:11)
at PlasmicRootProvider (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_loader-react.js?v=646803cb:13558:5)
at AppRoot
at PlasmicLinkProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:497:20)
at SafePlasmicLinkProvider
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13542:16)
at Suspense
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13542:16)
at PlasmicRootProvider (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13472:24)
at ApolloProvider (http://localhost:5173/node_modules/.vite/deps/chunk-NDIYQFVB.js?v=646803cb:9769:20)
at S (http://localhost:5173/node_modules/.vite/deps/@nhost_react-apollo.js?v=646803cb:914:13)
at ve (http://localhost:5173/node_modules/.vite/deps/chunk-TMEMDLLA.js?v=646803cb:322:10)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:3757
warnUnknownProperties @ react-dom.development.js:3803
validateProperties$2 @ react-dom.development.js:3827
validatePropertiesInDevelopment @ react-dom.development.js:9541
setInitialProperties @ react-dom.development.js:9830
finalizeInitialChildren @ react-dom.development.js:10950
completeWork @ react-dom.development.js:22232
completeUnitOfWork @ react-dom.development.js:26635
performUnitOfWork @ react-dom.development.js:26607
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
performSyncWorkOnRoot @ react-dom.development.js:26124
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25690Understand this error
react-dom.development.js:86 Warning: React does not recognize the familyNameState
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase familynamestate
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at div
at div
at func (http://localhost:5173/src/components/plasmic/flow_insights/PlasmicSurveyStart.jsx:350:49)
at WithUsePlasmicAuthComponent (http://localhost:5173/src/components/plasmic/flow_insights/PlasmicSurveyStart.jsx:378:27)
at SurveySection1Container (http://localhost:5173/src/components/SurveySection1Container.jsx:25:27)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:5449:26)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:6182:3)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:6125:13)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=646803cb:9111:3)
at Suspense
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_loader-react.js?v=646803cb:13496:16)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at PageParamsProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:433:22)
at SWRConfig$1 (http://localhost:5173/node_modules/.vite/deps/chunk-7KOZKNDX.js?v=646803cb:456:21)
at PlasmicQueryDataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-7KOZKNDX.js?v=646803cb:975:11)
at PlasmicRootProvider (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_loader-react.js?v=646803cb:13558:5)
at AppRoot
at PlasmicLinkProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:497:20)
at SafePlasmicLinkProvider
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13542:16)
at Suspense
at DataProvider (http://localhost:5173/node_modules/.vite/deps/chunk-D5UOIL4S.js?v=646803cb:383:18)
at MaybeWrap (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13542:16)
at PlasmicRootProvider (http://localhost:5173/node_modules/.vite/deps/@plasmicapp_react-web.js?v=646803cb:13472:24)
at ApolloProvider (http://localhost:5173/node_modules/.vite/deps/chunk-NDIYQFVB.js?v=646803cb:9769:20)
at S (http://localhost:5173/node_modules/.vite/deps/@nhost_react-apollo.js?v=646803cb:914:13)
at ve (http://localhost:5173/node_modules/.vite/deps/chunk-TMEMDLLA.js?v=646803cb:322:10)”
Here is my React script for this page "// 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.
// They will be mapped to the Plasmic component’s external state props.
let givenNameValue = ‘’;
let familyNameValue = ‘’;
let personalEmailValue = ‘’;
let workEmailValue = ‘’; // Assuming this state holds the work email or location
let organizationNameValue = ‘’;
let orgSpecificEmailValue = ‘’;
let reportingManagerNameValue = ‘’;
let initialTeamsValue = ;
// — Process fetched data if available —
if (personData) {
givenNameValue = personData.FirstName || ‘’;
familyNameValue = personData.LastName || ‘’;
personalEmailValue = personData.Personal_Email || ‘’;
workEmailValue = personData.Work_Location || ‘’; // Map Nhost’s Work_Location to Plasmic’s workEmailState
organizationNameValue = personData.Person_Organization_Affiliations?.[0]?.Organization?.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(role => {
const team = role.Team;
const teamManager = team?.teamManagerById;
const teamManagerFullName = teamManager
? `${teamManager.FirstName || ''} ${teamManager.LastName || ''}`.trim()
: '';
return {
teamName: team?.Team_Name || '',
yourTitle: role.Role_Title || '',
teamSize: team?.Team_Size || null,
primaryContact: teamManagerFullName,
selected: false,
teamId: team?.Team_ID,
personTeamRoleId: role.Person_Team_Role_ID,
teamManagerPersonId: teamManager?.Person_ID,
};
});
}
// — 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.
;
}
// This part runs ONLY if authenticated, not loading, no error.
// We’ll pass the data (or empty strings/arrays if personData is null) to the Plasmic component.
// — Start: Logging data being passed —
console.log(“DEBUG: Data being passed to PlasmicSurveyStart props (external state names):”, {
givenName: givenNameValue, // Original variable names for logging clarity
familyName: familyNameValue,
personalEmail: personalEmailValue,
workEmail: workEmailValue,
organizationName: organizationNameValue,
orgSpecificEmail: orgSpecificEmailValue,
initialTeams: initialTeamsValue,
reportingManagerName: reportingManagerNameValue,
});
// — End: Logging data being passed —
return (
<PlasmicSurveyStart
// Pass the mapped data to props that correspond to Plasmic’s exposed external state variables.
// These prop names (e.g., givenNameState) MUST EXACTLY match the “external name”
// you configured for the state variables in Plasmic Studio (e.g., in Person Basic Input component).
givenNameState={givenNameValue}
familyNameState={familyNameValue}
personalEmailState={personalEmailValue}
workEmailState={workEmailValue} // Assuming workEmailState is the external name for the work email input state
organizationNameState={organizationNameValue}
orgSpecificEmailState={orgSpecificEmailValue}
initialTeamsState={initialTeamsValue}
reportingManagerNameState={reportingManagerNameValue}
// Add any other props for exposed external state variables from other sections (e.g., TeamFormBlock)
/>
);
}
export default SurveySection1Container;"
Here is my react script for this page -