array variable undefined when passing into React child component - arrays

Question

I am trying to retrieve props from an internal api for a component, PresetFetcher, and pass them to a child component, PromptForm. My console logs show that the data is pulled from the API correctly and saved into an object {preset} which has the correct data. But no matter what I do, when I try to pass {preset} to the child component, it reports null value and fails to compile. What is wrong here? It must be some very basic misunderstanding on my part.
To keep it simple, I am avoiding state or effect, since the data does not need to be refreshed once the PromptForm receives it.
import axios from 'axios'
import { useParams } from 'react-router-dom'
import React, { useEffect,useState } from 'react'
import PromptForm from './PromptForm';
const API_SEARCH_BASE = 'http://0.0.0.0:5001/api2/preset_loader';
function PresetFetcher(props) {
const { preset_name } = useParams();
const API_SEARCH_URL = API_SEARCH_BASE + '/' + preset_name;
console.log('API_SEARCH_URL: ' + API_SEARCH_URL);
console.log('props entering PresetFetcher page', props);
const test = [{ name: 'item 1' }, { name: 'item2' }];
axios.get(API_SEARCH_URL)
.then
(response => {
console.log('PresetFetcher: response: ', response.data);
const preset = response.data;
console.log('preset after const', preset);
var preset_description = preset[0].preset_description;
console.log('preset_description: ', preset_description);
})
return (
<div> <PromptForm preset_out = {preset_description} /></div>
)
{console.log('props leaving Presetfetcher: ', props)};
}
export default PresetFetcher;
[HMR] Waiting for update signal from WDS...
index.js:8 Array(1)
launcher.js:11 on LauncherPage, preset name is baby-name-generator
launcher.js:12 props on launcherpage are Object
PresetFetcher.js:13 API_SEARCH_URL: http://0.0.0.0:5001/api2/preset_loader/baby-name-generator
PresetFetcher.js:14 props entering PresetFetcher page Object
PresetFetcher.js:13 API_SEARCH_URL: http://0.0.0.0:5001/api2/preset_loader/baby-name-generator
PresetFetcher.js:14 props entering PresetFetcher page Object
PresetFetcher.js:21 PresetFetcher: response: Array(1)
PresetFetcher.js:23 preset after const Array(1)
PresetFetcher.js:25 preset_description: Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.
PresetFetcher.js:21 PresetFetcher: response: Array(1)
PresetFetcher.js:23 preset after const Array(1)0: {id: "2", preset_name: "Baby Name Generator (by Attributes)", preset_author: "WebBabyShower.com", preset_active: "True", preset_launched: "20210610", …}length: 1[[Prototype]]: Array(0)
PresetFetcher.js:25 preset_description: Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.
ReferenceError: preset_description is not defined
PresetFetcher
src/components/PresetFetcher.js:28
25 | console.log('preset_description: ', preset_description);
26 | })
27 | return (
> 28 | <div> <PromptForm preset_out = {preset_description} /></div>
| ^ 29 |
30 | )
31 | {console.log('props leaving Presetfetcher: ', props)};
the API data looks like this. there is only one item in the list.
[
{
"id": "2",
"preset_name": "Baby Name Generator (by Attributes)",
"preset_author": "WebBabyShower.com",
"preset_active": "True",
"preset_launched": "20210610",
"preset_description": "Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.",
"preset_instructions":

Answer 1

That variable is not available in the scope you're calling it. Try moving it outside the then block. I suggest storing it in local state so the component updates when the fetch completes.
const [presetDescription, setPresetDescription] = useState('')
axios.get(API_SEARCH_URL)
.then
(response => {
const preset = response.data;
setPresetDescription(preset[0].preset_description);
})
<PromptForm preset_out={presetDescription} />

Answer 2

You can use the "useState" hook as mentioned in the above answer or you can also use the 'useRef' hook as it can be used to hold values similar to an instance property on a class. You can read more about it here.
To use it in this case, you can do something like this:-
const presetDescription = useRef('');
axios.get(API_SEARCH_URL)
.then
(response => {
const preset = response.data;
presetDescription.current = preset[0].preset_description;
})
<PromptForm preset_out={presetDescription.current} />