array variable undefined when passing into React child component

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":

jmargolisvt · Accepted Answer · 2021-08-19 21:40:31Z

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} />

answered Aug 19, 2021 at 21:40

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2021-08-19 22:54:41Z

0

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} />

edited Aug 19, 2021 at 22:54

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 19, 2021 at 22:49

SARTHAK DUGGAL

113 bronze badges

Collectives™ on Stack Overflow

array variable undefined when passing into React child component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related