Props in not passing value to Child Component in React

1

I am developing a simple food app. Firstly, it will show dishDetails in MenuComponent and onClick it will pass Id of a selected dish to a function named as getDish(dishdetail) Here i want to send props or state to my CartComponent where it will show details of selected Dish.

Problem-1 Props is not passing to Cart (undefined value) but dishdetail name,id is showing if i do console.log in MenuComponent

How i can pass props/state to Cart kindly guide me.

//Here im binding my function

    class Menu extends Component {
  constructor(props) {
    super(props);
    this.getDish = this.getDish.bind(this);
  }




//This is my getDish function(in which i want to send props to Cart)
    getDish(dishDetail) {
        return (
          <React.Fragment>
            
            <Cart dishdetail={dishDetail}/>  **//undefined in Cart**
            {console.log({dishDetail.name})} **//it is working perfectly**
          </React.Fragment>
        );
      }

Working Fine

From Where I am sending data onClick function

<button
    onClick={() => this.getDish(this.props.dishes[index])}
  ></button>
2

I think we’d really need to see more of the code. Do you have a repo?

For me, debugging is about finding out where the code is doing what I expect and then where it isn’t doing what I expect and then gradually inch those closer together. When they touch, you’ve found the location of your problem.

For example, I’d want to expand out that function and see what it is getting:

<button
  onClick={ () => {
    console.log(this.props.dishes);
    console.log(index);
    console.log(this.props.dishes[index]);
    return this.getDish(this.props.dishes[index]);
  } }
></button>

I am also curious about how getDish is going to do anything - it returns JSX but that is never rendered.

3

I am Sending you complete MenuComponent in which i want to get Particular dish Id and pass it to CartComponent(Child component of Menu) like a Ecommerce website.Where we will order a item and it appears on Cart.
Also i do some changes i code.Please guide me i wasted my week on this error or bug

import React, { Component } from "react";
import { Card, CardText, CardBody, CardTitle, CardSubtitle } from "reactstrap";
import Cart from "./Cartcomponent";
class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishDetail: null,
    };

    this.getDish = this.getDish.bind(this);
  }

  getDish(selectedDish) {
    this.setState({
      dishDetail: selectedDish,
    });
  }
  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          {this.props.dishes.map((dish, index) => {
            return (
              <Card className="col-xl-2">
                
                <img
                  height="30%"
                  src={this.props.dishes[index].image}
                  alt={this.props.dishes[index].description}
                />
              <button
                  className="text-white m-2 p-2 "
                  onClick={() => this.getDish(this.props.dishes[index])}
                ></button>
              </Card>
            );
          })}
        </div>
        <Cart dishDetail={this.state.dishDetail} />
      </div>
    );
  }
}
export default Menu;
4

I think you are making things more complicated than they need to be. For example, when you are in the callback for the map function, you don’t need to say this.props.dishes[index] but can use dish.

I wasn’t able to get it to work with your styling and other imported components, but I was able to get an MVP doing this. I have a pen here if you want to see it.

Let me know if anything isn’t clear.

5

thanku soo much for your help.
I’m getting selected dish perfectly.Actually my real problem is: i’m not able to pass this Selected dish to Cart component.I dont know whether its a Route issue or some other issue.i’m beginner in React and Hope to be as good as you.
Please guide me more if possible!

6

I can’t get an idea without seeing the code. If you have a repo, I can take a closer look.