0

I am using the react-admin framework, and trying to send a dynamic successMessage from the Create/Edit views based on the value of a child input in the parent view's SimpleForm.

Right now GetSuccessMsg() is called once on render and is only passing the initial value to the notifications panel. Here's my current code.

export const UserCreation = ({ userId, timezone, ...props }) => {
  var SuccessMsg = "Account Created. Email sent to complete account setup."
  const ValidateUserCreation = (values) => {
    SuccessMsg = values 
      ? "Account Created. Email sent to complete account setup." 
      : "Account Created"
    return undefined
  };

  const GetSuccessMsg = () => { return SuccessMsg }

  return (
    <Create {...props} successMessage={GetSuccessMsg()}>
      <SimpleForm toolbar={<WithPracticeToolbar many />}>
        <TextInput source="name" />
        <TextInput source="phone" />
        <TextInput source="email" />
        <TimezoneDropDown source="timezone" />
        <BooleanInput
          validate={ValidateUserCreation}
          label="Create login account for this member"
          source="createMemberLogin"
          defaultValue
        />
      </SimpleForm>
     </Create>
   )
};

I am looking for any reasonable way to UPDATE the successMessage prop (passed to the Create) when the child input is changed.

Thanks in advance for the help!

MwamiTovi
  • 2,425
  • 17
  • 25
HarshMarshmallow
  • 1,007
  • 11
  • 23
  • `GetSuccessMsg()` is invoking the function right away, while `GetSuccessMsg` will only be triggered as and when required. – MwamiTovi Jun 13 '20 at 07:30

1 Answers1

0

you could try doing something like these. Furthemore think you will find details on https://marmelab.com/react-admin/Inputs.html

import { useForm } from 'react-final-form';

export const UserCreation = ({ userId, timezone, ...props }) => {

var SuccessMsg = "Account Created. Email sent to complete account setup."

const ValidateUserCreation = ({ formData, ...rest }) => {
    // here think you will hava acces to the formData values
    SuccessMsg = formData ? `Account Created. Email sent to ${formData.email} to complete account setup.` : "Account Created"
    return undefined
};

const GetSuccessMsg = () =>{
    return SuccessMsg 
}

return (
  <Create {...props} successMessage={GetSuccessMsg()}>
    <SimpleForm toolbar={<WithPracticeToolbar many />}>
      <FormDataConsumer>
        <TextInput source="name" />
        <TextInput source="phone" />
        <TextInput source="email" />
        <TimezoneDropDown source="timezone" />
        {formDataProps => (
          <BooleanInput
            validate={ValidateUserCreation(formDataProps)}
            label="Create login account for this member"
            source="createMemberLogin"
            defaultValue/>
         )}

      <FormDataConsumer>
    </SimpleForm>
  </Create>
)
};
edulecca
  • 1
  • 1