React doesn't correctly re-render dynamically created Components added to an <svg> via state

[davidhatten]

Do you want to request a feature or report a bug?
I believe I am reporting a bug

What is the current behavior?
When I have a dynamic tag named through a const, the element attributes will be parsed correctly, but the tag name won't be resolved all the way down to it's react component and thus, won't be rendered.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).

https://jsfiddle.net/ebsrpraL/1/

Click in the SVG box. A tag appears in the svg DOM with its attributes looking like html (with dashes instead of camelCase).

What is the expected behavior?
If you change "ShapeTag" to "Circle", things work as intended and another circle appears.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Bash on Ubuntu on Windows in Chrome

[aweary]

Hey @davidhatten, the issue is that you're setting ShapeTag to the string "Circle", when what you really want is a reference to the Circle component.

// This is wrong
const ShapeTag = `Circle`;
// This is right
const ShapeTag = Circle;

Remember that JSX just compiles to React.createElement calls, and React assumes that if you're passing a string like React.createElement("Circle") then you're trying to create a DOM node, like a div or span. That's what when you inspect the DOM you see that it's rendering it as Circle, not circle.

Hope that clears things up!