Konva React image not displaying

Question

I have a very simple Konva-react app (I've taken it right out of the docs) and it doesn't work (doesn't display the image) displaying two warnings:

1. Warning: <Image /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
2. Warning: The tag <Image> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. My Canvas component:

import { Image } from 'react-konva';
import useImage from 'use-image';

const url = 'https://konvajs.github.io/assets/yoda.jpg';

export default function Canvas() {  
    const [image] = useImage(url);
    return <Image image={image} />;
}

My app component:

import Canvas from './canvas';

function App() {
  return (
    <div className="App">
      <h2>Conva App</h2>
      <Canvas />
    </div>
  );
}

export default App;

How can I fix it?

Answer 1

You can't simply render Konva components anywhere. You need to create the <Stage> and a <Layer> component first, and only then add your component:

import { Stage, Layer } from "react-konva";
import Canvas from "./canvas";

function App() {
  return (
    <div className="App">
      <h2>Conva App</h2>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Canvas />
        </Layer>
      </Stage>
    </div>
  );
}

export default App;

You can check this sandbox for a working example.