passing image from list(stateless) component to display(stateful) component --react

Question

 //ImagePlayer component class ImagePlayer extends Component { constructor(props) { super(props) this.state = { image: [], selectedImage: '', } this.handleImageSelection = this.handleImageSelection.bind(this); } handleImageSelection(source){ this.setState({ImageList: source}) } render() { return ( <Grid container spacing={3}> <Grid item xs={8}> <Paper> {/* this is the larger div where I want to render the image clicked on the list */} <ImageList handleImageSelection={this.handleImageSelection}/> </Paper> </Grid> <Grid item xs={4}> <Paper> <ImageList /> </Paper> </Grid> </Grid> ); } } //ImageList component onst ImageList = (handleImageSelection) =>{ handleImageSelection=(image)=>{ console.log(image); } return( images.map((image, id) => <List> <ListItem key={id} > <div> <ListItemAvatar> {<img src= {require(`../assets/${image.name}.jpeg`)} alt="thumbnail" onClick={()=>handleImageSelection(require(`../assets/${image.name}.jpeg`))}/>} </ListItemAvatar> </div> <div >)

How to render the image from List component to Class component in React? My list component is list of images and that should appear enlarged in class component when I click on any image on the list.

I first defined the state: this.state ={ imageSelected: ''} then, setState for the same. Also passed handleImageSelection as a function in list component, but it says

'handleImageSelection' is not a function

onClick={()=> props.handleImageSelection()} //errr: not a function

Answer 1

If both your list and display component are wrapped by common parent, you may lift necessary state (eg chosen image id ) as follows:

 const { Component } = React, { render } = ReactDOM, rootNode = document.getElementById('root') const imageList = [ {id:0, name: 'circle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPjwvc3ZnPg==`}, {id:1, name: 'triangle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTAsMCBMMTAwLDEwMCBMMCwxMDAgeiIvPjwvc3ZnPg==`}, {id:2, name: 'square', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCwwIGgxMDAgdjEwMCBoLTEwMCB6Ii8+PC9zdmc+`}, ] const List = ({images, onSelect}) => ( <ul> { images.map(({imgSrc, name, id}) => ( <li key={id} onClick={() => onSelect(id)}> <img className="thumbnail" src={imgSrc} alt={name}/> </li> )) } </ul> ) class Display extends Component { render (){ const {imgSrc,name} = this.props.image return ( <img className="fullsize" src={imgSrc} alt={name} /> ) } } class App extends Component { state = { chosenImg: null } images = imageList onSelect = _id => this.setState({ chosenImg: this.images.find(({id}) => id == _id) }) render(){ return ( <div> <List images={this.images} onSelect={this.onSelect} /> { this.state.chosenImg && <Display image={this.state.chosenImg} />} </div> ) } } render ( <App />, rootNode )

 .thumbnail { max-width: 50px; cursor: pointer; }.fullsize { width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>