Expose text input and other dynamic values to Plasmic Studio.

This is one thing I’ve never managed to get to work consistently. I’d love to see the right docs on this if they’re out there.

I have the following code component, and it includes a text input field. I want to be able to submit the contents of that text input field via a form in Plasmic Studio, but I can’t currently access the data when a user types in it. Plasmic is blind to it.

How do I expose this dynamic value?

import React, { useState, useEffect } from 'react';

const DescriptionListRow = ({ title, value, onChange }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [inputValue, setInputValue] = useState(value);

  useEffect(() => {
    setInputValue(value);
  }, [value]);

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    if (onChange) {
      onChange(newValue);
    }
  };

  const handleUpdateClick = () => {
    setIsEditing(true);
  };

  const handleSubmit = () => {
    setIsEditing(false);
    if (onChange) {
      onChange(inputValue);
    }
  };

  const handleCancel = () => {
    setIsEditing(false);
    setInputValue(value);
  };

  return (
    <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
      <dt className="text-sm font-medium leading-6 text-gray-900">{title}</dt>
      <dd className="mt-1 flex text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
        <span className="flex-grow">
          {isEditing ? (
            <input
              type="text"
              value={inputValue}
              onChange={handleInputChange}
              className="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          ) : (
            value
          )}
        </span>
        <span className="ml-4 flex-shrink-0">
          {isEditing ? (
            <>
              <button
                type="button"
                className="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500 mr-2"
                onClick={handleSubmit}
              >
                Save
              </button>
              <button
                type="button"
                className="rounded-md bg-white font-medium text-gray-600 hover:text-gray-500"
                onClick={handleCancel}
              >
                Cancel
              </button>
            </>
          ) : (
            <button
              type="button"
              className="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500"
              onClick={handleUpdateClick}
            >
              Update
            </button>
          )}
        </span>
      </dd>
    </div>
  );
};

export default DescriptionListRow;

Hello @tom_prest-drawbridge.

You can expose your state as a read-only state to the parent component by following this doc: Code components API reference | Learn Plasmic