React Formik JSON to YAML, then back to JSON on Submit - reactjs

Question

My goal is to have a JSON object stringified to YAML for a field value then, on form submit, take the YAML and convert it to JSON.
I was able to take the JSON, and use YAML.stringify(options, null, 2); to get a YAML value in the field to be edited with YAML node package. However, upon submit I'm not exactly sure how to parse the YAML as JSON.
Near the bottom of my component I tried to push JSON.stringify('', null, 0) to get the value but I keep getting YAML.
How can I get the edited YAML field to parse back to JSON for the data with Formik's onSubmit?
Is taking edited YAML and converting it as JSON on submit something that is possible on the frontend or would I have to add backend logic? I found converters but not much in this instance.
My JSON data (focus is on "options" key):
{
"id": "1",
"photo_name": "Testing",
"options": {
"test": true,
"command": [
"test photo"
],
"max_size": 50,
"is_prio": false
},
YAML output:
test: true
command:
- test photo
max_size: 50
is_prio: false
My React component:
import YAML from 'yaml';
const NewPhoto = () => {
const fetchContext = useContext(FetchContext);
const [photoList, setphotoList] = useState([]);
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
useEffect(() => {
const getphotoList = async () => {
try {
const { data } = await fetchContext.authAxios.get(`/api/photo_data/`);
setphotoList(data.results);
} catch (err) {
console.log(err);
}
};
getphotoList();
}, [fetchContext]);
const initialValues = {
id: '',
options: '',
};
return (
<div className="col-xl-12">
<Formik
initialValues={initialValues}
onSubmit={async (values, { resetForm }) => {
alert(JSON.stringify(values, null, 2));
resetForm();
}}
validationSchema={schema}
>
{({ isSubmitting, values, setFieldValue, handleChange }) => (
<Form>
<FieldArray name="photo">
{({ insert, remove, push }) => (
<>
{values.photo.length > 0 &&
values.photo.map((task, index) => (
<div className="row" key={index}>
<div className="col-11">
<div className="row">
<div className="col">
<div className="form-group">
<label htmlFor={`photo.${index}.step`}>
PHOTO TASK
</label>
<Field
className="form-control"
as="select"
name={`photo.${index}.id`}
onChange={(event) => {
handleChange(event);
const selectedPhotoTask = photoList.find(
(photoList) =>
photoList.id === event.target.value
);
const selectedOptions = YAML.stringify(
selectedPhotoTask.options,
null,
2
);
setFieldValue(
`photo.${index}.options`,
selectedOptions
);
}}
>
<option value="" defaultValue disabled>
...
</option>
{photoList &&
photoList.map((task) => (
<option key={task.id} value={task.id}>
{task.name}
</option>
))}
</Field>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="form-group">
<label htmlFor={`photo.${index}.options`}>
OPTIONS
</label>
<Field
id="options"
component="textarea"
className="form-control"
name={`photo.${index}.options`}
type="text"
rows="4"
onChange={handleChange}
/>
</div>
</div>
</div>
</div>
<div className="col-1">
<button
type="button"
className="btn"
onClick={() => remove(index)}
>
DELETE
</button>
</div>
</div>
))}
<button
type="button"
className="btn"
onClick={() =>
push({
id: '',
options: '',
// options: JSON.stringify('', null, 0),
})
}
>
ADD
</button>
</>
)}
</FieldArray>
<button className="btn" type="submit" disabled={isSubmitting}>
SUBMIT
</button>
</Form>
)}
</Formik>
</div>
);
};
export default NewPhoto;

Answer 1

I needed to save the values into their own variable, and then loop through them and apply a YAML.parse() for each index.
let submitVals = values;
for (let index = 0; index < submitVals.photo.length; index++) {
let optionsText = YAML.parse(submitVals.photo[index].options);
submitVals.photo[index].options = optionsText;
}
console.log(submitVals);
send(submitVals);