Not showing the id in the screen when hovering

I am using leaflet and mapbox and I use the function to print the id nuber on the screen when hovering over the line in the map.

geojson = L.geoJson(lines, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};


info.update = function (props) {
    this._div.innerHTML = '<h4><b>Links<b></h4>' +  (props ?
        '<b>Link' + props.id + '</b><br />'  
        : 'Hover over a link');


};

info.addTo(map);

The way I draw the line is by the following geoJSON file

var lines = {
    "type": "FeatureCollection",
    "features": [{
        "type": "LineString",
        "coordinates": [
            [103.85, 1.28992],
            [103.89, 1.294],
            [103.83, 1.216]
        ],
        "properties": { "id": "1" }
    }, {
        "type": "LineString",
        "properties": { "id": "2" },
        "coordinates": [
            [103.5, 1.292],
            [103.9, 1.4],
            [103.3, 1.21]
        ]
    }, {
        "type": "LineString",
        "properties": { "id": "3" },
        "coordinates": [
            [103.6, 1.291],
            [103.6, 1.39],
            [103.3, 1.29]
        ]
    }]
};

but when i hover over the line it shows "undefined" instead of showing the id.Any help is appreciated