moveUp() and moveDown() not work corectlly

[Dudyboy]

Hello, I have a problem with this functions ( moveUp and moveDown ).

Here is my workarround.

class MyImage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      src: '',
      image: null,
      rotation: 0
    };

    this.onMouseDown = this.onMouseDown.bind(this);
  }

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.srcImage;
    image.height = 150;
    image.width = 150;
    image.onload = () => {
      this.setState({
        image: image
      });
    };
  }

  onMouseDown(e) {
    this.props.setActiveImage(e.target._id);
  }

  render() {
    return (
      <Group
        draggable
        onMouseDown={this.onMouseDown}
        rotation={this.state.rotation}
        opacity={1}
      >
        <Image
          image={this.state.image}
        />
      </Group>
    );
  }
}

When I mouseDown on Group with Image, I set a active image.

export function setActiveImage(id) {
  return({
    type: ACTIVE_IMAGE,
    payload: id
  });
}

Canvas is here. I map array with images and draw them. I click on Image and set active image, then I have PanelTools, where I have buttons like 'delete', 'clone', 'moveUp', 'moveDown' etc ... And this last two buttons not work like have. When I click on Image and then on button 'moveUp' or 'moveDown', image is pushing up and down (like I expected and should), but when I click back on canvas, images drop to their positions like were before.

layerImage(image) {
    return(
      <MyImage srcImage={image} />
    );
  }

onButtonClickAction(type) {
    switch(type) {
      case 'moveUp':
        this.refs.layer.find('Image').map(image => {
          if(image._id === this.props.activeImage.activeImage) {
            image.parent.moveUp();
          }
        });
        this.refs.layer.draw();
        break;
      case 'moveDown':
        this.refs.layer.find('Image').map(image => {
          if(image._id === this.props.activeImage.activeImage) {
            image.parent.moveDown();
          }
        });
        this.refs.layer.draw();
        break;    
      default:
        return false;
    }
  }

render() {
    return(
      <div>
        <PanelTools onButtonClickAction={(type) => this.onButtonClickAction(type)}/>
        <div ref="outer" className="outter-set">
          <div className="inner-set">
            <div id="fashion-designer" className="fashion-designer">
              <Stage ref="stage" width={700} height={700} onContentClick={this.onStageClick}>
                <Layer ref="layer">
                  {this.props.layerImages.map(this.layerImage)}
                </Layer>
              </Stage>
            </div>
          </div>
        </div>
      </div>
    );
  }

Thanks for any advices.

[lavrton]

You are moving Konva nodes manually, but your render function describe them in the old order, so react-konva reorder them back (as in render function). So you don't need to move nodes manually, you just need to change the order in your state and rerender.

[lavrton]

https://konvajs.org/docs/react/zIndex.html