I have a list of posts like facebook feed, every single post has a dropdown with "edit,delete,report".

I use Ant Design UI, the problem is I can't access the props value "DeleteId" inside the children menus.

But I can access props values (deleteId) inside the ponent.

According to Ant Design here , children menus (menu) are declared outside the ponent.

Codepen Demo

//-------------- Outside Component --------------------

const onClick = function (info) {
  console.log(info)
};

const menu = (
  <Menu onClick={onClick}>

    { 
     // this.props.deleteId  <=== this doesn't work, props value is "undefined"
    }

    <Menu.Item key="1">Edit</Menu.Item>
    <Menu.Item key="delete-Id-here">Delete</Menu.Item>
    <Menu.Item key="3">Report</Menu.Item>
  </Menu>
);

//-------------- Inside Component --------------------

class Demo extends React.Component {
   render(){

     console.log("deleteId = "+ this.props.deleteId +" ( Inside ponent ) ")
// this.props.deleteId  <=== This props value works fine, I can access all props data inside ponent

     return (
  <Dropdown overlay={menu}>
       <a className="ant-dropdown-link" href="#">
        <Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
    </a>
  </Dropdown>
     )
   }
}

ReactDOM.render( <Demo deleteId="123456"/>,
  mountNode);

Probably, it doesn't know "props" values inside children menus

I have a list of posts like facebook feed, every single post has a dropdown with "edit,delete,report".

I use Ant Design UI, the problem is I can't access the props value "DeleteId" inside the children menus.

But I can access props values (deleteId) inside the ponent.

According to Ant Design here , children menus (menu) are declared outside the ponent.

Codepen Demo

//-------------- Outside Component --------------------

const onClick = function (info) {
  console.log(info)
};

const menu = (
  <Menu onClick={onClick}>

    { 
     // this.props.deleteId  <=== this doesn't work, props value is "undefined"
    }

    <Menu.Item key="1">Edit</Menu.Item>
    <Menu.Item key="delete-Id-here">Delete</Menu.Item>
    <Menu.Item key="3">Report</Menu.Item>
  </Menu>
);

//-------------- Inside Component --------------------

class Demo extends React.Component {
   render(){

     console.log("deleteId = "+ this.props.deleteId +" ( Inside ponent ) ")
// this.props.deleteId  <=== This props value works fine, I can access all props data inside ponent

     return (
  <Dropdown overlay={menu}>
       <a className="ant-dropdown-link" href="#">
        <Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
    </a>
  </Dropdown>
     )
   }
}

ReactDOM.render( <Demo deleteId="123456"/>,
  mountNode);

Probably, it doesn't know "props" values inside children menus

• javascript
• reactjs
• antd
• react-props

1 Answer 1

It appears that you're just missing passing on the props to your menu functional ponent. Below is modified code to pass deleteId as a parameter to the menu function.

const menu = (deleteId) => (
  <Menu onClick={onClick}>
    <Menu.Item key="1">Edit</Menu.Item>
    <Menu.Item key="delete-Id-here">Delete {deleteId}</Menu.Item>
    <Menu.Item key="3">Report</Menu.Item>
  </Menu>
);

Demo

class Demo extends React.Component {
  render(){
    return (
      <Dropdown overlay={menu(this.props.deleteId)}>
        <a className="ant-dropdown-link" href="#">
          <Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
        </a>
      </Dropdown>
     )
  }
}