Pass on component variable value to another component variable

Using a Callback Function

To share the showStartsOn value from SentenceBuild to Component-2:

1. Pass a callback function to SentenceBuild that will send the value of showStartsOn up to the parent component.
2. Store the shared value in the parent component's state.
3. Pass this state to Component-2.

1. SentenceBuild (Component-1)

Modify SentenceBuild to accept a callback function and call it when showStartsOn changes:

function SentenceBuild({
    form,
    fieldPath,
    defaultValue,
    useDefaultValue,
    readOnly,
    onShowStartsOnUpdate, // Callback function for sending data to parent
}: {
    form: FormHook;
    fieldPath: EditMedicationForm.InstructionFields;
    defaultValue: string;
    useDefaultValue: boolean;
    readOnly?: boolean;
    onShowStartsOnUpdate: (value: boolean) => void; // Callback function
}) {
    const startsOn = moment(instruction.startsOn, ValidDateFormats.NodeDateTimeTimezone);

    let showStartsOn = false;
    if (startsOn && startsOn.isValid()) {
        showStartsOn = moment().endOf("day").isBefore(startsOn, "day");
    }

    // Call the callback to send `showStartsOn` value to the parent
    React.useEffect(() => {
        onShowStartsOnUpdate(showStartsOn); // Notify parent component
    }, [showStartsOn, onShowStartsOnUpdate]); // Ensure the callback is called when `showStartsOn` changes

    return (
        

            {showStartsOn && (
                
            )}
        
    );
}

2. Parent Component

In the parent component, store the showStartsOn value in a state variable and pass the callback function to SentenceBuild. Then, pass the state value to Component-2.

function ParentComponent() {
    const [showStartsOn, setShowStartsOn] = React.useState(false);

    // Callback function to receive `showStartsOn` from SentenceBuild
    const handleShowStartsOnUpdate = (value: boolean) => {
        setShowStartsOn(value);
    };

    return (
        

            {/* Pass the callback function to SentenceBuild */}
            

            {/* Pass `showStartsOn` value to Component-2 */}
            
        
    );
}

3. Component-2

In Component-2, use the showStartsOn value as needed:

function Component2({ showStartsOn }: { showStartsOn: boolean }) {
    const performedOnMoment = showStartsOn;

    return (
        

            

                {performedOnMoment
                    ? "The event starts in the future."
                    : "The event has already started or is today."}
            
        
    );
}

Can you please share the example for above with call back function.How to write code with call back function?

Props willn't work because some other properties also there if I try to put optional there is some other errors are thrown.

Can you please share alternatae sol for this.

Hello Praveen,

You can use props to pass data from parent controller to child controler,

import React from 'react';
import moment from 'moment';

const ParentComponent = (props: {
  form: FormHook;
  fieldPath: EditMedicationForm.InstructionFields;
  defaultValue: string;
  useDefaultValue: boolean;
  readOnly?: boolean;
}) => {
  const startsOn = moment(props.form.values[props.fieldPath].startsOn, ValidDateFormats.NodeDateTimeTimezone);

  const showStartsOn = startsOn && startsOn.isValid() && moment().endOf('day').isBefore(startsOn, 'day');

  return (
    

      
      
    
  );
};

Component-1

function SentenceBuild(props: {
  form: FormHook;
  fieldPath: EditMedicationForm.InstructionFields;
  defaultValue: string;
  useDefaultValue: boolean;
  readOnly?: boolean;
  showStartsOn: boolean;
}) {
  const startsOn = moment(props.form.values[props.fieldPath].startsOn, ValidDateFormats.NodeDateTimeTimezone);

  return (
    

      {props.showStartsOn && (
        
      )}
    
  );
}

Component-2 

function Component2(props: { showStartsOn: boolean }) {
  return (
    

      {props.showStartsOn && 
The action starts later today!
}
    
  );
}

To pass the showStartsOn value from Component-1 (SentenceBuild) to Component-2, you can follow these steps:

Approach: Using Props to Pass Data

1. Expose showStartsOn as a Prop: Modify Component-1 (SentenceBuild) to accept a callback function or a state-updating function as a prop to share the value of showStartsOn.

2. Lift State Up or Use Parent State: The parent component can act as a bridge to share showStartsOn between SentenceBuild and Component-2.

Updated SentenceBuild (Component-1)

function SentenceBuild(props: {
    form: FormHook;
    fieldPath: EditMedicationForm.InstructionFields;
    defaultValue: string;
    useDefaultValue: boolean;
    readOnly?: boolean;
    onShowStartsOnChange?: (value: boolean) => void; // Add a prop for callback
}) {
    const startsOn = moment(instruction.startsOn, ValidDateFormats.NodeDateTimeTimezone);
    let showStartsOn = false;

    if (startsOn && startsOn.isValid()) {
        showStartsOn = moment().endOf('day').isBefore(startsOn, 'day');
    }

    // Notify parent of the `showStartsOn` value
    if (props.onShowStartsOnChange) {
        props.onShowStartsOnChange(showStartsOn);
    }

    return (
        

            {showStartsOn && (
                
            )}
        
    );
}

Parent Component

In the parent component, store the showStartsOn value in a state variable and pass it down to Component-2.

function ParentComponent() {
    const [showStartsOn, setShowStartsOn] = React.useState(false);

    return (
        

            {/* Pass the state-updating function to Component-1 */}
             setShowStartsOn(value)} // Update state
            />

            {/* Pass the state to Component-2 */}
            
        
    );
}

Component-2

Now, Component-2 can directly access the showStartsOn value through its props.

function Component2(props: { showStartsOn: boolean }) {
    const performedOnMoment = props.showStartsOn;

    return (
        

            {performedOnMoment ? "Starts On is True" : "Starts On is False"}
        
    );
}

Summary of Changes

1. Add a callback function (onShowStartsOnChange) in SentenceBuild to pass the value of showStartsOn to the parent.
2. Use a parent state to store the showStartsOn value and pass it as a prop to Component-2.
3. Access the showStartsOn value in Component-2 via its props.

This approach ensures a clean flow of data between components without tightly coupling them.