Prompt Title: React MobX Field Rendering

Human: How can I change the below react js mobx 'ResultsForm.jsx'file so that when in the 'ChecksForm.jsx' file the two below <AnzTextField name={'OperatorName'} type='text' id={'OperatorName' + ChecksID} value={ChecksDetails.OperatorName} onChange={(e) => { actionChange(ChecksID, 'OperatorName', e.target.value) }} /> And <TextareaField type='text' name={'reasonNotAdvisingChecks'} id={'reasonNotAdvisingChecks' + ChecksID} value={ChecksDetails.reasonNotAdvisingChecks} onChange={(e) => { actionChange(ChecksID, 'reasonNotAdvisingChecks', e.target.value) }} /> Have not been changed and are therefore in the 'ResultsForm.jsx' 0 or nil or is empty Meaning that the MasterNote = MasterNote + '\nChecks not advised/completed because: ' + details.reasonNotAdvisingChecks And MasterNote = MasterNote + '\n' + details.OperatorName Do not render by default. It should only render if HNTChecksStore.getChecksDetailsCount() > 0 ResultsForm.jsx: import React, { useState } from 'react'; import { inject, observer } from "mobx-react"; import TextareaField from '@anz/textarea-field'; import Button from '@anz/button' const ResultsForm = ({ HNTChecksStore }) => { const [text, setText] = useState(''); const CreateNotes = () => { let MasterNote = '' if (HNTChecksStore.getChecksDetailsCount() > 0) { for (let i = 0; i < HNTChecksStore.getChecksDetailsCount(); i++) { let details = HNTChecksStore.getChecksDetails(i) MasterNote = MasterNote + '\nChecks not advised/completed because: ' + details.reasonNotAdvisingChecks } } if (HNTChecksStore.getChecksDetailsCount() > 0) { for (let i = 0; i < HNTChecksStore.getChecksDetailsCount(); i++) { let details = HNTChecksStore.getChecksDetails(i) MasterNote = MasterNote + '\n' + details.OperatorName } } return MasterNote } const handleCheckChanges = () => { const newNote = CreateNotes(); if (newNote !== text) { setText(newNote); } }; return ( <div> <Button onClick={handleCheckChanges} > Check for Changes </Button> <TextareaField readOnly={false} value={text} onChange={(e) => setText(e.target.value)} /> </div> ); } export default inject('HNTChecksStore')(observer(ResultsForm)); import React, { useState } from 'react'; import { inject, observer } from "mobx-react"; import AnzTextField from '@anz/text-field'; import TextareaField from '@anz/textarea-field'; const ChecksForm = ({ HNTChecksStore }) => { const [toggle, setToggle] = useState(false) const populateForm1 = () => { let MasterReturn = [] for (let i = 0; i < HNTChecksStore.getChecksDetailsCount(); i++) { MasterReturn.push(Form1(i, HNTChecksStore.getChecksDetails(i))) } return MasterReturn }; const actionChange = (ChecksID, Name, value) => { HNTChecksStore.setChecksDetails(ChecksID, Name, value) setToggle(!toggle) }; const Form1 = (ChecksID, ChecksDetails) => { return ( <div> <AnzTextField name={'OperatorName'} type='text' id={'OperatorName' + ChecksID} value={ChecksDetails.OperatorName} onChange={(e) => { actionChange(ChecksID, 'OperatorName', e.target.value) }} /> <TextareaField type='text' name={'reasonNotAdvisingChecks'} id={'reasonNotAdvisingChecks' + ChecksID} value={ChecksDetails.reasonNotAdvisingChecks} onChange={(e) => { actionChange(ChecksID, 'reasonNotAdvisingChecks', e.target.value) }} /> </div> ) } return ( <div> {populateForm1()} </div> ); } export default inject('HNTChecksStore')(observer(ChecksForm));

ChatGPT:

To achieve the desired behavior, you can modify the CreateNotes() function in the ResultsForm.jsx file to only include the MasterNote if the reasonNotAdvisingChecks and OperatorName fields are not empty. Here's an updated version of the CreateNotes() function:

javascriptCopy code
const CreateNotes = () => {
  let MasterNote = '';
  if (HNTChecksStore.getChecksDetailsCount() > 0) {
    for (let i = 0; i < HNTChecksStore.getChecksDetailsCount(); i++) {
      let details = HNTChecksStore.getChecksDetails(i);
      if (details.reasonNotAdvisingChecks && details.OperatorName) {
        MasterNote = MasterNote + '\nChecks not advised/completed because: ' + details.reasonNotAdvisingChecks;
        MasterNote = MasterNote + '\n' + details.OperatorName;
      }
    }
  }
  return MasterNote;
};

This updated function will only append the reasonNotAdvisingChecks and OperatorName fields to the MasterNote string if they are not empty or null.

In addition to this, you can modify the ResultsForm.jsx file to only render the MasterNote if the getChecksDetailsCount() function in the HNTChecksStore returns a value greater than 0. Here's the updated ResultsForm.jsx file:

javascriptCopy code
import React, { useState } from 'react';
import { inject, observer } from "mobx-react";
import TextareaField from '@anz/textarea-field';
import Button from '@anz/button'

const ResultsForm = ({ HNTChecksStore }) => {
  const [text, setText] = useState('');
  const CreateNotes = () => {
    let MasterNote = '';
    if (HNTChecksStore.getChecksDetailsCount() > 0) {
      for (let i = 0; i < HNTChecksStore.getChecksDetailsCount(); i++) {
        let details = HNTChecksStore.getChecksDetails(i);
        if (details.reasonNotAdvisingChecks && details.OperatorName) {
          MasterNote = MasterNote + '\nChecks not advised/completed because: ' + details.reasonNotAdvisingChecks;
          MasterNote = MasterNote + '\n' + details.OperatorName;
        }
      }
    }
    return MasterNote;
  };
  const handleCheckChanges = () => {
    const newNote = CreateNotes();
    if (newNote !== text) {
      setText(newNote);
    }
  };
  return (
    <div>
      {HNTChecksStore.getChecksDetailsCount() > 0 &&
        <Button
          onClick={handleCheckChanges}
        >
          Check for Changes
        </Button>
      }
      {text !== '' &&
        <TextareaField
          readOnly={false}
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      }
    </div>
  );
};

export default inject('HNTChecksStore')(observer(ResultsForm));

In this updated file, the Button and TextareaField components are only rendered if the getChecksDetailsCount() function returns a value greater than 0, and the CreateNotes() function only appends the reasonNotAdvisingChecks and OperatorName fields if they are not empty or null.