The PathMapper component renders a single panel with an input field for entering the directory path to be secured and a Submit button. On clicking the Submit button, the PathMap() method is called, which sets the DirPath state variable. This variable holds the root directory path for the lifecycle of the app:
<div>
Enter Root of directory path to be secured
</div>
<InputField onInputChangeUpdateField={props.onInputChangeUpdateField}
fields={props.fields} name="DirPath" Placeholder="Directory Path"/>
<p className="control">
<a className="button is-success"
onClick={() => props.PathMap()}>
Submit
</a>
</p>
</div>
The PathMapper component is rendered the first time the app is launched. It captures and sets the DirPath state variable.