javascript - Trying to populate a option dropdow component using a fetch

Question

I was looking up how to dynamically populate a dropdown() component I have set up and I am having a hard time getting it to work. The data for the categories is getting pulled (fetched) from a Rails Api I have setup on the backend. I am also getting a 'TypeError: this.props.state is undefined' message as well if that helps with factors to my issue.

So far in my RecipeInput form component this is what I have so far with the dropdown rendered: //I took out some of the event handlers to try to keep this explanation straight to the point

import React, { Component } from 'react'
import  Catagories  from './Catagories.js'

class RecipeInput extends Component{
    constructor(props){
        super(props)

        this.state = {
            catagories: [],
            name:'',
            ingredients: '',
            chef_name: '',
            origin: '',
        }

        
    }

    

    componentDidMount(){
        let initialCats = [];
        const BASE_URL = `http://localhost:10524`
        const CATAGOREIS_URL =`${BASE_URL}/catagories`
        fetch(CATAGOREIS_URL)
        .then(resp => resp.json())
        .then(data => {
            initialCats = data.results.map((catagory) => {
                return catagory
            })
                this.setState({
                    catagories: initialCats,
                })   
            });
    }

    

    
  

     render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Catagories catagories={this.state.catagories}/>
                    
                    <input value='submit' type='submit'/>
                </form>
            </div>
        )
    }


 


}

export default RecipeInput

And here is my actual Catagories component:

import React, { Component } from 'react'

class Catagories extends Component{
    constructor(){
        super()
    }

    render(){
        let catagories = this.props.state.catagories
        let optionItems = catagories.map((catagory,index) =>
            <option key={index}>{catagory.name}</option>
        )


        return (
            <div>
                <select>
                    {optionItems}
                </select>
            </div>
        )
    }
}

export default Catagories

Who is able to point out my dropdown is not populating based on the code provided?

question from:https://stackoverflow.com/questions/65545786/trying-to-populate-a-option-dropdow-component-using-a-fetch

Answer 1

Use this.props.catagories instead this.props.state.catagories