this.terminal.current.pushToStdout allow to push react element
sinwailam193 opened this issue · 3 comments
Hello thank you for creating this library. Before on version 3.0.5, I was allow to push in react elements something like this:
pushToStdout(<span className="style">message</span>); which allowed me to style the message. However, after I upgraded to 4.0.1, I can no longer push element in. Even if I push react elements, it is converted into strings. Is there a way I can push in elements like before?
I found a way to resolve it by converting the react element into string like so pushToStdout("<span className=\"style\">message</span>");. Just curious if this is the intentional behavior.
Hi, this happens because the application works in the following way:
pushToStdout()takes a message and pushes it to the message array in component state.pushToStdout()performssetState().- Component updates, and renders the messages in the terminal to the effect of
this.state.messages.map(msg => <TerminalMessage>{msg}</TerminalMessage>).
See the pushToStdout method and how getStdout is called in the component body, which is just a call to the getStdout method.
Elements don't get rendered because, per default, React renders items like this by appending element.innerText instead of element.innerHTML for security reasons, and this component inherently follows the same methodology. Because of this, the pushToStdout() function doesn't expect to receive anything except strings.
However, this behaviour can be overriden by setting the dangerMode prop to true, which renders the strings being pushed literally as HTML. The reason why it doesn't work if you just pass in a component is that, because the pushToStdout method only expects strings, you're actually trying to render a component object as HTML, which obviously doesn't work, and hence why you need to quote it as you demonstrated.
So, as far as I'm concerned, this is intentional behaviour 👍
Thank you for the explanation, now it all make sense