0

I am attempting to code my own version of the equation input on this website, as I am working on my own solver for matrices and matrix equations:

https://www.symbolab.com/solver/matrix-calculator

It can be observed that users are able to input matrices of different sizes into a text area, which are rendered as tables. However, when I attempt to do the same in my own code, it simply renders [object Object].

How can I achieve this functionality?

import React from 'react';


const Solver = () => {
    return (
    <textarea>

        <table>
            <tr>
                <td>
                    Hi
                </td>
            </tr>
        </table>

    </textarea>
    )
}

export default Solver;
Perplexityy
  • 561
  • 1
  • 9
  • 26
  • Are you saying that this code you are including in the question, renders `[object Object]`? Or can you show the code that is actually doing that? – Jackyef Feb 25 '20 at 03:22
  • Correct, it renders the text area with [object Object] embedded within it as text – Perplexityy Feb 25 '20 at 03:28
  • I see. Since `` is a JSX, it is basically an object, when used as a value of a text input like text area, it will become [object Object]. I think you can use dangerouslySetInnerHTML if you really need textarea. Why does it need to be textarea by the way? EDIT: Nevermind, you will get an error "`dangerouslySetInnerHTML` does not make sense on
    – Jackyef Feb 25 '20 at 03:33
  • Because I want to be able to type things like det(M) into it, which would be parsed as determinant(M) where M is a table element representing a matrix, and I can’t think of another way of doing it. This is also the way it is done in the link of my OP, at least it appears to be. – Perplexityy Feb 25 '20 at 03:41
  • @Perplexityy You can't render children in classic HTML input elements. To achieve the functionality on that site they're using a custom solution which, while there is a `` nested in there, uses other tags and custom functionality to simulate a traditional textarea input. You can see this if you open the inspector, the textarea value is stored in a `var` tag, the "cursor" is just a styled span that periodically changes its CSS to appear flashing, etc.. You'll have to make a custom component to do this, or find a library which does what you want. – Jayce444 Feb 25 '20 at 04:00
  • Does div with `contentEditable={true}` satisfy your requirement? – Jackyef Feb 25 '20 at 04:49
  • https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea – akashdeep arora Feb 28 '20 at 14:07

0 Answers0