TypeError: Cannot read property 'props' of undefined. Need to pass props form a functional component to another one

Question

I am trying to pass props from the parent component to the child component. When I load the app I just get the error that I specified on top and can't understand why. I tried many things but can't get working. I would like to pass all the props from to the component . Also, I would like to pass the function handleChange from to .Can anyone help me in fixing this issue as I am new in REACT and still do not understand how it works properly. Thanks in advance. Parent Component:

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

function Betslip() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]
    const [selectedValue, setSelectedValue] = useState(null);

    const handleChange = obj => {
        setSelectedValue(obj);
    }
    return (
        <div className="betslip">
            <div className="betslip-top">
                <h1 className="text">BETSLIP</h1>
                <p className="text-two">BET WITH US!</p>
                <div>
                    <FilterMenu
                        options={data}
                        value={selectedValue}
                        onChange={handleChange}
                    />
                </div>
            </div>
            <div>
                <FetchRandomBet />
            </div>
            <Button className="betnow" variant="contained">
                Bet Now!
                </Button>
        </div>
    );
}

export default Betslip;

Child component:

import React from 'react';
import Select from 'react-select'

function FilterMenu() {
    return (
        <>
            <Select
                options={this.props.options}
                value={this.props.value}
            />
        </>
    )
}

export default FilterMenu;

Answer 1

You need to pass props as an argument into the FilterMenu component. Here's a complete solution (e.g. when you select an option in your child component, the function in the parent component will execute and display the option):

import React, {useState } from 'react';
import FilterMenu from './FilterMenu'

function App() {
  const data = [
    {
        value: 0,
        label: "No Filter"
    },
    {
        value: 1,
        label: "Less than two"
    },
    {
        value: 2,
        label: "More than two"
    },
]
const [selectedValue, setSelectedValue] = useState(null);

const handleChange = obj => {
    console.log(obj)
    setSelectedValue(obj.value + " " + obj.label);
}
return (
    <div className="betslip">

            <div>
                <FilterMenu
                    optionsProp={data}
                    value={selectedValue}
                    onChangeProp={handleChange}
                />
                {selectedValue}
            </div>


    </div>
);
}

export default App;

---

import React from 'react';
import Select from 'react-select'

function FilterMenu(props) {
    return (
        <>
            <Select
                options={props.optionsProp}
                value={props.value}
                onChange={props.onChangeProp}
            />
        </>
    )
}

export default FilterMenu;

Answer 2

props are passed to functional component as arguments and are not available on this instance

function FilterMenu(props) {
    return (
        <>
            <Select
                options={props.options}
                value={props.value}
            />
        </>
    )
}

export default FilterMenu;