How do I know precisely what kind of “input” prop variables are there?

Question

I'm from Java background and I'm trying hard to learn web language: React. I remember in java, function is defined with set of inputs: public static int add(int x, int y) However, in React there seem to be only one (props) and all inputs are used as prop.x prop.y ... etc

I'm importing the following Map component in 'kakao-map-react' package:

var Map = function (props) {
    var id = props.id;
    var kakao = window.kakao;
    var mapId = id ? id : 'kakao-map-react';
    var map = useMapState().map;
    var dispatch = useMapDispatch();
    React.useEffect(function () {
        if (!map) {
            var events_1 = [];
            var mapContainer = document.getElementById(mapId);
            var mapOptions = {
                center: new kakao.maps.LatLng(props.initialPosition.latitude, props.initialPosition.longitude),
                level: props.level,
            };
            var newMap_1 = new kakao.maps.Map(mapContainer, mapOptions);
            if (props.onMapLoaded) {
                props.onMapLoaded(newMap_1);
            }
            var _loop_1 = function (event_1) {
                if (props[event_1.key]) {
                    kakao.maps.event.addListener(newMap_1, event_1.event, function (mouseEvent) {
                        if (props[event_1.key]) {
                            if (event_1.hasMouseEvent) {
                                var handler = props[event_1.key](newMap_1, mouseEvent);
                                events_1.push({
                                    target: newMap_1,
                                    type: event_1.event,
                                    handler: handler,
                                });
                            }
                            else {
                                var handler = props[event_1.key](newMap_1);
                                events_1.push({
                                    target: newMap_1,
                                    type: event_1.event,
                                    handler: handler,
                                });
                            }
                        }
                    });
                }
            };
            for (var _i = 0, eventsArr_1 = eventsArr; _i < eventsArr_1.length; _i++) {
                var event_1 = eventsArr_1[_i];
                _loop_1(event_1);
            }
            dispatch({
                type: 'SET_MAP',
                payload: newMap_1,
            });
            return function () {
                for (var _i = 0, events_2 = events_1; _i < events_2.length; _i++) {
                    var event_2 = events_2[_i];
                    kakao.maps.event.removeListener(event_2.target, event_2.type, event_2.handler);
                }
            };
        }
        else {
            return function () {
            };
        }
    }, []);
    /*
    * Set new center if long lat changes
    * */
    React.useEffect(function () {
        if (map) {
            map.setCenter(new kakao.maps.LatLng(props.center.latitude, props.center.longitude));
        }
    }, [
        props.center.latitude,
        props.center.longitude,
        props.center.token,
    ]);
    /*
    * Set new level if props.level changes
    * */
    React.useEffect(function () {
        if (map) {
            map.setLevel(props.level);
        }
    }, [
        props.level
    ]);
    return (React.createElement("div", { id: mapId, style: {
            height: '100%'
        } }, props.children));
};

In this long code, how do I know what kind of inputs(props) I need to insert?

I tried Ctrl-F 'props', but there were too many and I didn't understand which input is which:

props.id, props.initialPosition.latitude, props.initialPosition.longitude, props.level, props.onMapLoaded, props[event_1.key], props.center.latitude, props.center.longitude, props.center.token.

Thank you.

Answer 1

I have a Java background myself and was surprised to see that many documentations in JavaScript world don't care about about the data types in their API references. You have two options:

1. Go through their documentation on GitHub or their official site. A well-mantained project lists their input props and which types they require.

2. You don't find that information in the documentation => You must dig through the source code and find out yourself.

3. Your IDE might be abale to help you. I use Intellij and for most packages the IDE is able to infer the types by their typescript definitions.