React.js not re-rendering on setState

Question

I hope you can help here as I have been struggling on this for a while now, I am trying to change the displayed picture on hover, I am getting the url of the new picture from a function called from the child component (passSingleImage), once I receive the new url i reset the state, i am also console.logging the new state and it has indeed being changed on hover, however the component is not re-rendering! this is my main component where the state has been changed...

export default class ShowMore extends React.Component{
    constructor(props){
            super()
            this.state = {
                product: '',
                photos:'',
                currentImage: ''
            }
    }

componentDidMount(){    
        debugger
        Tracker.autorun(()=>{
            var product = Products.find({_id:this.props.location.query.id}).fetch()
            var photos = Photos.find({id:this.props.location.query.id}).fetch()
            if(photos.length > 0) {
                this.setState({product,photos, currentImage:photos[0].url})
                console.log("original state currentImage", this.state.currentImage)
            }
        })
}
passSingleImage(photo){
        if(photo){
            this.setState({currentImage:photo},( )=>{
                console.log('set the state',this.state.currentImage)
                this.forceUpdate()
                this.render()
            })

        }
} 

render(){
        debugger
        if(this.state.product.length > 0) {
            return(
                <div>
                    <TopBar/>
                    <div className ="container">
                        <div className="row">

                            <ul style = {{width: '30%'}} >
                                <li>name: {this.state.product[0].name}</li>
                                <li>price: {this.state.product[0].price}</li>
                            </ul>
                            <ImageSlider
                                photos          = {this.state.photos} 
                                history         = {this.props.history}
                                passSingleImage = {this.passSingleImage}
                            />
                            <BiggerImage
                                image = {this.state.currentImage} 

                            />
                        </div>
                    </div>
                </div>


            )
        }else {
            return <LoaderComp message ={'loading images'}/>
            }
    }
}

and then the component that is displaying the image (always the same!)

import React from 'react'
import TopBar   from '../TopBar'

export default class BiggerImage extends React.Component{
    constructor(props){
        super()
    }
componentWillReceiveProps(nextProp){
    debugger
}
componentWillUpdate(a,b){
    debugger
}
componentDidUpdate(a,b){
    debugger
}
render(){
    let img = {
        maxWidth: '100%'
    }
    let abs = {
        position:'absolute',
        display:'inline-block',
        width:'70%',
        border:'1px solid black',
        marginLeft:'4%',
        marginRight:'4%'
    }
    return(
        <div style = {abs}>

            <div>
                <img style = {img} src = {this.props.image} alt="image"/>
            </div>
        </div>
    )
}

}

I should also add that none of the debuggers of the life cycle in the child component is ever triggered — Nilos
– Nilos, Commented Aug 22, 2017 at 14:55

Joe Clay · Accepted Answer · 2017-08-22 15:00:26Z

1

You're throwing away BiggerImage's props instead of passing them to super:

constructor(props) {
    super() // sad trombone
}

Either remove the constructor (it's not doing anything anyway), or change it to pass the props along:

constructor(props) {
    super(props)
}

More info can be found in the React docs.

answered Aug 22, 2017 at 15:00

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gibo · Accepted Answer · 2017-08-22 15:17:00Z

0

pass props to super

constructor(props) {
    super(props)

edited Aug 22, 2017 at 15:17

answered Aug 22, 2017 at 15:01

gibo

5372 gold badges6 silver badges22 bronze badges

1 Comment

Dave Newton Over a year ago

I'd have voted up if you'd reviewed your work for formatting and shown the correct code instead of re-posting the OP's non-working code.

Nilos · Accepted Answer · 2017-08-22 15:28:25Z

0

Hi and thanks for the answer! however that wasn't the issue, but I figured it out, I was binding this from the child component that was passing me the image url of the hover image, so when in the parent component I was setting the state, it was setting the state of the child component instead, hence having no effect! all fixed now though thanks!

answered Aug 22, 2017 at 15:28

Nilos

3591 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

React.js not re-rendering on setState

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related