Having trouble calling function in parent from child in react

Question

Overall goal is to call recipes based on input.

I am trying to call the search() in the parent from the child to whom i passed it as a prop. But I receive error - TypeError: this.props.search is not a function

can anyone see where I am wrong :/ I have taken care of the bindings and passing the props in :/

code from parent

import React, { Component } from 'react';
import RecipeDisplay from '../RecipeDisplay/RecipeDisplay';
import Form from '../Form/Form';
import './RecipeUI.css';

export default class RecipeUI extends Component {
    constructor(props) {
        super(props);
        this.state = {
            RecipeUI: [
                {
                    heading: 'heading!',
                    img:
                        'https://d2qpatdq99d39w.cloudfront.net/wp-content/uploads/2019/05/08152013/food-addiction-2.jpg',
                    ingridients: 'ingridients',
                    link:
                        'https://d2qpatdq99d39w.cloudfront.net/wp-content/uploads/2019/05/08152013/food-addiction-2.jpg'
                }
            ]
        };
        this.search = this.search.bind(this);
    }

    search() {
        alert('oi');
    }
    render() {
        return (
            <div className="RecipeUI">
                <div className="RecipeUI-header">
                    <h1>Welcome to the Recipe Fetcher</h1>
                    <Form />
                </div>
                <div className="RecipeUI-RecipeDisplay">
                    {this.state.RecipeUI.map((recipe) => (
                        <RecipeDisplay
                            heading={recipe.heading}
                            img={recipe.img}
                            ingridients={recipe.ingridients}
                            link={recipe.link}
                            search={this.search}
                        />
                    ))}
                </div>
            </div>
        );
    }
}

code from child

import React, { Component } from 'react';

export default class Form extends Component {
    constructor(props) {
        super(props);
        this.state = { recipeinput: '' };
        this.handleInput = this.handleInput.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }

    handleInput(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSearch(e) {
        e.preventDefault();
        this.props.search();
    }
    render() {
        return (
            <div>
                <form>
                    <label htmlFor="recipeinput">What are you in the mood for today?</label>
                    <input
                        id="recipeinput"
                        name="recipeinput"
                        value={this.state.recipeinput}
                        onChange={this.handleInput}
                    />
                </form>
                <button onClick={this.handleSearch}>Search</button>
            </div>
        );
    }
}

Answer 1

Your Form component has received no props. instead, you have passed this.search into the RecipeDisplay component.

render() {
        return (
            <div className="RecipeUI">
                <div className="RecipeUI-header">
                    <h1>Welcome to the Recipe Fetcher</h1>
                    <Form search={this.search} />
                </div>
                <div className="RecipeUI-RecipeDisplay">
                    {this.state.RecipeUI.map((recipe) => (
                        <RecipeDisplay
                            heading={recipe.heading}
                            img={recipe.img}
                            ingridients={recipe.ingridients}
                            link={recipe.link}

                        />
                    ))}
                </div>
            </div>
        );
    }