react.js pass value to child function

Question

I'm trying to create a Map with overlays, in react.js: Inside render , I got this:

<Map
                    provider={providers.osm}
                    defaultCenter={[22.3402092,91.8124206]}
                    center={[22.3402092,91.8124206]} zoom={this.state.zoom}
                    width={window.innerWidth*.8} height={window.innerHeight*.8}>

                    {
                        this.line()
                    }

                </Map>

And my line looks like this:

    line = ({ mapState: { width, height }, latLngToPixel,  style = { stroke: 'rgb(255,0,0)', strokeWidth: 2 } }) => {

        let coordsArray=this.state.vertex;

        if (coordsArray.length < 2) {
            return null;
        }

        let lines = [];
        let pixel = latLngToPixel(coordsArray[0]);




        for (let i = 1; i < coordsArray.length; i++) {
            let pixel2 = latLngToPixel(coordsArray[i]);
            lines.push(
                <line key={i} x1={pixel[0]} y1={pixel[1]} x2={pixel2[0]} y2={pixel2[1]} style={style} />
            );
            pixel = pixel2;
        }

        return (
            <svg width={width} height={height} style={{ top: 0, left: 0 }}>
                {lines}
            </svg>
        )
    }

It says Cannot read property 'mapState' of undefined , how can I resolve this?

codesandbox.io

Answer 1

You don't pass arguments to this.line so mapState will always be undefined

In this line ({ mapState: { width, height }, you are destructuring the mapState from the argument. Since you don't pass anything to this.line() it will always be undefined.

To pass props to this.line() just add what ever arguments you want in the brackets this.line(this.props) .

But passing the props from the Map to the line is not possible unless map has some hidden context you can check.