React Bootstrap Dropdown

Question

I am new to React and Boostrap, so please excuse my basic question. I have been looking for documentation, but can only find snippets, and not how it should all tie together.

I am using react-bootstrap and have rendered a dropdown successfully.

I have the following component:

import React, { Component } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';

class VesselDropdown extends Component {

    constructor(props) {
        super(props)    
        this.state = {
            vessels:[]
        }
    }

    componentDidMount() {
        fetch('http://localhost:3001/get/vessels')
        .then(res => res.json())
        .then((data) => {
          this.setState({ 
              vessels: data,
              test: 'xyz'
            })
        })
        .catch(console.log)
    }

    render() {
        console.log(this.state);
        return (

            <Dropdown>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
                Select a Vessel
            </Dropdown.Toggle>

            <Dropdown.Menu>
                {
                    this.state.vessels.map(d => {
                        return <Dropdown.Item href="#/{d.vesselimo}">{d.vesselname}</Dropdown.Item>
                    })
                }
            </Dropdown.Menu>
            </Dropdown>

        );
      }
}

export default VesselDropdown;

Question

I need to now add the action functionality.

1. How do I make a click on a Dropdown.Item invoke another component (VesselDetails) and display its output? Do I need to change the href on the item (to what)?
2. How does the VesselDetails component receive the parameter passed to it (the vessel identifier vesselimo)?

Thanks

More info:

the VesselDetails component is still a work in progress, but this is what I have so far:

import React, { Component } from 'react';
import Table from 'react-bootstrap/Table';

class VesselDetails extends Component {

    constructor(props) {
        super(props)    
        this.state = {
        }
    }

    componentDidMount() {
        fetch('/get/latestcalls/:imo')
        .then(res => res.json())
        .then((data) => {
          this.setState({ 
            latestcalls : data
            })
        })
        .catch(console.log)
    }

    render() {
        return (
            <div>
                <h3>Port Calls</h3>
                <Table striped bordered hover>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>Detail1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1</td>
                    <td>Mark</td>
                    </tr>
                </tbody>
                </Table>
            </div>
        );
      }
}

export default VesselDetails;

Answer 1

With onSelect you can access to vesselimo

    handleSelect (evt) {
      // pass as props or call api
      console.log(evt)
  }

....

<Dropdown.Item onSelect={(evt)=>{this.handleSelect(evt)}} 
       eventKey={d.vesselimo}>{d.vesselname}</Dropdown.Item>