Pass on component variable value to another component variable

Question

Component-1

function SentenceBuild(props: {

form: FormHook<EditMedicationForm.EditMedicationFormStructure>;

fieldPath: EditMedicationForm.InstructionFields;

defaultValue: string;

useDefaultValue: boolean;

readOnly?: boolean;

}) {

const startsOn = moment(instruction.startsOn, ValidDateFormats.NodeDateTimeTimezone);

let showStartsOn = false;

if (startsOn && startsOn.isValid()) {

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

return (

{showStartsOn && (

<SentenceItem

prefix='starting on'

readOnly={props.readOnly}

value={moment(startsOn).format(ValidDateFormats.Edit)}

default='[date]'

/>

)}

</div>

);

}

Compnent-2

const performedOnMoment = Here I want to showStartsOn value

Jignesh Kumar · Answer

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! } ); }

Naveen Kumar · Answer

To pass the showStartsOn value from Component-1 ( SentenceBuild ) to Component-2  you can follow these steps: Approach: Using Props to Pass Data 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 . 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 Add a callback function ( onShowStartsOnChange ) in SentenceBuild to pass the value of showStartsOn to the parent. Use a parent state to store the showStartsOn value and pass it as a prop to Component-2 . Access the showStartsOn value in Component-2 via its props. This approach ensures a clean flow of data between components without tightly coupling them.

Naveen Kumar · Answer

Using a Callback Function To share the showStartsOn value from SentenceBuild to Component-2 : Pass a callback function to SentenceBuild that will send the value of showStartsOn up to the parent component. Store the shared value in the parent component's state. 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.} ); }

amar Praveen · Answer

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

amar Praveen · Answer

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.