0

I have a list of 50 photos which I will get from an API. When the user clicks on any photo it should open up on the right side component.

When a photo in the right side component is clicked it should scroll down (if the image is not at top) the the place in the page where that image is present.

import React from 'react';
import axios from 'axios';
import '../App.css';


class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state={
        image:'abc',
    }
  }

  imageload(appendimage){
    this.setState({
        image:appendimage
    })
  }

componentWillMount() {
    axios.get('http//api')
    .then((res) => this.setState({
        results: res.data
    }))
    .catch((error)=>{
        console.log(error)
    })
}

  render() {
    return (
        <div>
           <div className="left">
            <img  width="373" height="230" alt="img3" id="mytarget"
                onClick={this.imageload.bind(this,"https://i.ytimg.com.jpg")} 
                src="https://i.ytimg.com/vi/.jpg"
            />
          </div>

          <div className="right>
           <img src={this.state.ima} height={510} width={400}
                                alt="placeholderimg"
                                style={{position:"fixed"}}
                                className={classes.staticimg}
                                onClick={this.imageredirect.bind(this)} 
           />
         </div>
        </div>
    );
  }
}

export default withStyles(style)(Dashboard);
Supriya Bhart
  • 89
  • 1
  • 3
  • 10
  • Possible duplicate of [How to smoothly scroll to an element in pure javascript](https://stackoverflow.com/questions/51689653/how-to-smoothly-scroll-to-an-element-in-pure-javascript) – morganbaz Sep 27 '18 at 12:24
  • Possible duplicate of [Pure Javascript - Click and scroll to Div inside div](https://stackoverflow.com/questions/44931133/pure-javascript-click-and-scroll-to-div-inside-div) – Dan O Sep 27 '18 at 12:32

0 Answers0