Search code examples
javascriptreactjscomponentsundefinedreact-props

React: array as props shows as undefined


I'm trying to pass an array called myitems as props to a child component, but I get an error saying that options is undefined in the Child component. Not sure what's going on here. Any help will be highly appreciated.

Child component:

import React from 'react';

const Dropdown = ({className, options}) => {

    return (
        <>
            <select className={className}>
                {options.map((el,i) => (<option key={i}>{el.type}</option>))}
            </select>
        </>
    )
}

export default Dropdown;

Parent component:

import React from 'react';
import Dropdown from './Dropdown'

const BudgetInput = ({ descValue, budgetValue, onDescChange }) => {


    const myItems = [{ type: '+' }, { type: '-' }];

    return (
        <>
            <Dropdown 
                className="add__type"
                options={myItems}
            />
            <input 
                type="text" 
                className="add__description" 
                placeholder="Add description" 
                value={descValue}
                onChange={onDescChange} 
            />
            <input 
                type="number" 
                className="add__value" 
                placeholder="Value" 
                value={budgetValue}
                //onChange={}
            />
            <Dropdown
                className="add__category"
            />
            <button onClick={handleInput}>Enter</button>
        </>
    )
}

export default BudgetInput;

Solution

  • You're not passing an options prop to the second Dropdown instance, which is why you're getting the error

    <Dropdown
      className="add__category"
    />