How to hide one element from KONVA group

Question

I have a KONVA group with three object in it. I want to show/hide one object of the group.

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const group = new Konva.Group();
layer.add(group);

const circle1 = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green',
  visible: true
});

const circle2 = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 30,
  fill: 'red',
  visible: true
});

const circle3 = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 10,
  fill: 'blue',
  visible: true
});

group.add(circle1);
group.add(circle2);
group.add(circle3);

layer.draw();

//group.hide(); // if I use this it will hide entire group but i want to hide only one object
layer.draw();

I want to show/hide only the circle2 from the Konva group. can any one please help me?

Answer 1

just call hide method of circle2.

circle2.hide();

This circle2 is added in your group by reference. So if you make any change in circle2, it will reflect in group.