import MyImage from './images/myImage.jpg';

class Image extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            height: 0
        }
    }

    getHeight = (e) => {
        const height = e.target.getBoundingClientRect().height;

        this.setState({
            height: height
        });
        this.props.setUnitHeight(height);
    }


    render() {
        const image = this.props.image;

        return (
            <img src={image.name} onLoad={(e)=>{this.getHeight(e)}} />;
        );
    }
}

class App extends Component {

    constructor(props) {
        super(props);
        const initUnit = 78.4;

        this.state = {
            unit: initUnit
        }
    }

    setUnitHeight = (height) => {
        this.setState({
            unit: height
        });
    }

    render() {
        return (
                <div>
                    <Image imagw={MyImage} setUnitHeight={this.setUnitHeight} />
                </div>
        );
    }
}