Plasmic isnt displaying data I sent to $props from the page jsx

Im not an experienced developer but I have a GraphQL database on Nhost with data. I set up $props with dynamic values in plasmic to use that data. And I created React scripts that call the database, get the data, and attempt to pass it to the $props on the web page. I can see in the console that the data is reaching the web page but the props in Plasmic are not using it. Instead I repeatedly get this error “react-dom.development.js:86 Warning: React does not recognize the prop on a DOM element.” I have carefully checked all of the Plasmic configurations in my project to make sure that the $props are set up correctly without any default values and that props are assigned with dynamic values to the fields I want to filll with data. When I look into the react code generated by Plasmic it appears that the Plasmic React code is over writing the values Ive sent to the $props instead of using it.

Since this doesnt work Im now going to try calling the database from
Plasmic using integrations. But sending the data to the $props from React should work and React should be able to use that data.

Hey @murray_robinson, can you provide the link for the project that you’re making with this?

My first guess is that you’re setting $props directly which shouldn’t happen. Could you use a state variable with a different name for this?

Here is the project and the page Im having touble with. Plasmic

Hey @murray_robinson,

instead of making the value prop of each input be equal to $props.something, I believe the best approach would be to allow external access to the state variables of the component:

LMK if this solves your issue

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 -

Hey @murray_robinson

Thanks for sharing the react scripts.

Assuming the above is a complete code of the page you shared. I think you would need to pass the values inside personBasicInput instead of passing it directly to PlasmicSurveyStart. Please try the following

return (
<PlasmicSurveyStart
      personBasicInput={{
         givenNameState: givenNameValue,
         familyNameState: familyNameValue,
         personalEmailState: personalEmailValue,
         workEmailState: workEmailValue,
      }}
/>

Thanks

Ok that worked. Thanks. Can you explain why it worked and my solution didnt and also point me to the section of the documentation that describes this approach?