0

I am new to reactJS, but thought I had understood the minimal change and update of DOM. Apparently I was wrong. I have a ReactJS-class Gallery, which renders a list of images (I included two functions of this class). The url of one image (in the images-list) is dependent on the Gallery state (index), so I thought that the image-url would change (forcing a new get request to the server), since it is dependent on the index-value of Gallery, by changing the gallery state.index to something else. How is my thinking incorrect? how can I update an image-url from the gallery class?

getInitialState: function(){
    var self = this;
    window.addEventListener('keypress', function(e){
        if(e.keyCode == 39){
            if(self.state.index < self.state.size){
                self.setState({index: self.state.index+1});
                console.log(self.state.index);
            }
        }
        if(e.keyCode == 37){
            if(self.state.index > 0){
                self.setState({index: self.state.index-1});
                console.log(self.state.index);
            }
        }
    })
render:function(){
        var images= [];
        var url = "/patient/" + this.state.index.toString();
        images.push(<Image src={url} width={500} height={520} left={150} top={this.state.base} />);
        return (
            <div>
            {images}
            </div>
        );
}

might be a very relevant link (investigating now): Reactjs: how to modify child state or props from parent?

Community
  • 1
  • 1
stian
  • 1,947
  • 5
  • 25
  • 47
  • Is there more to your React component than these two functions? I can't see that you set state.size anywhere. By the way: You should probably return an object with default values from getInitialState (as that is what you are actually supposed to do in this function). Something like { size: 0, index: 0}, or whatever makes sense for your case – Knut Marius Mar 27 '16 at 20:58
  • @Knut. Yes. I just limited myself to showing the relevant relationships. I do return an object in getInitialState (here size and index is set). – stian Mar 27 '16 at 21:01
  • I reckon you have checked the console for React-related errors or warnings? – Knut Marius Mar 27 '16 at 21:03
  • Not completely sure why things aren't working without seeing the entire picture, but when it comes to DOM event listeners in React components, you should be adding/removing in `componentWillMount`/`componentWillUnmount` respectively. You may find this link helpful: https://facebook.github.io/react/tips/dom-event-listeners.html – marcacyr Mar 27 '16 at 21:05
  • yes, I have. The code is working, it just doesn't seem like my state changes propagate down to children components as far as I can see. – stian Mar 27 '16 at 21:05
  • thanks. My event listener is working and I am changing the state correctly. – stian Mar 27 '16 at 21:07
  • Also, with your render function do you mean to only ever have one Image in the images array? Each time the render function fires in React, it will reset the images to an empty array per the first line in that method and you will end up with a single item array each time - which may be completely intentional, but just wondering if it is. – marcacyr Mar 27 '16 at 21:08
  • As mentioned by maracacyr, it is difficult to know for sure without seeing the full picture here. Have you used breakpoints or similar to find out whether the render method is fired when expected to, and what the value of the state is at that time? And also: Have you tried using just an instead of ? – Knut Marius Mar 27 '16 at 21:08
  • @marcacyr. No, I will have more images in the array. Just tried to reduce the code a bit. I know the render-method fires atleast once (since I am looking at the result in a browser). Since the image src is an url to the backEnd I guess I can assume (from the lack of get-request) that it is not rendering again with the changed state. I haven't tried instead of . – stian Mar 27 '16 at 21:15
  • Ahhh, so you do expect a get request? In that case, perhaps the state is updating correctly (which you pointed out in a previous comment), but you need a handler invoked on a lifecycle event that will issue the get request when necessary. Maybe doing that operation in componentWillUpdate would do the trick? You could check nextState in there and fire off the get request when you need to - just a thought. I don't know exactly what you're trying to do.. just trying to throw out potentially helpful thoughts! – marcacyr Mar 27 '16 at 21:25
  • @marcacyr. Yes thank you. From one of my previous comments. I created an Image class that renders an HTML5. Since the props.src is connected to the gallery state, I thought I had a state->props changedState ->forcesChangedProps ...and this would result automatically to a new get-request (the src-change). – stian Mar 27 '16 at 21:34

0 Answers0