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

murray_robinson · May 22, 2025, 12:46am

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.

icaro_guerra · May 22, 2025, 12:15pm

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?

murray_robinson · May 23, 2025, 2:04am

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

icaro_guerra · May 26, 2025, 6:13pm

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

murray_robinson · June 2, 2025, 11:50pm

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 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 -

muhammad_asim · June 3, 2025, 4:12pm

Hey @murray_robinson

Thanks for sharing the react scripts.

murray_robinson:

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)
/>
);

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

murray_robinson · June 4, 2025, 12:27am

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?