How is Layer.add accessed?

I’ve been trying to add a new shape object to an existing Layer in response to a click event. (Feel free to tell me that’s not how this package works 🤣) Just a quick sample to demonstrate what I’ve tried:

import React from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Circle } from 'react-konva';

const myLayer = <Layer />;

const App = () => <Stage>{myLayer}</Stage>;

render(<App />, document.getElementById('root'));

// Later when the user clicks on something, but we can try this now why not
const myNewRuntimeElement = <Circle/>;

myLayer.add(myNewRuntimeElement);

BUT, this yeilds an error: TypeError: myLayer.add is not a function

“Okay, well if its not here, where do I go?”

I tried reaching into the Layer ref…

let myLayerRef;
const myLayer = <Layer ref={node => myLayerRef = node}/>;
...
myLayerRef.add(myNewRuntimeElement);

…Which has the add function defined, but gives an error: TypeError: child.getParent is not a function.

I get the same error if I pass the circle’s ref to add, but that feels like a react anti-pattern rabbit hole I’d prefer not to go down. Is this something I can accomplish with this tool, and if so, how?

Thanks! 😄

[edemlock]

Hello @victormanuelfrancodev okay, thanks it is clear! The rect is drawn on the layer by an array, but I want to draw it as many times as I click on my image Or how do I write the function that I call on onClick()? So what do I write to my onClick function which is also in the render()?

Because I tried some solutions, but none of them worked and I confused. This is my first program in react. I’m implementing an earlier code that I wrote in pure javascript and konva.

[Rakotoarisoa]

Okay. Thanks.