Beginner React query(How to remove a element and append another element)

Question

I've just started learning React and after going through some guides, I tried making a Markdown Previewer. I successfully build it. But I wanted something else, I wanted to make a <textarea> then after the user has written on it then when they click on a button, it renders the HTML on itself(which isn't possible). So, is there a way to remove the <textarea> and append a div with the rendered HTML.

I mean, how can I remove the <textarea> and then append a new <div> with when the user clicks on the button?

If the question isn't clear, just comment what is missing, I'll edit it.

JSX for the Markdown

const example = `Heading
=======

Sub-heading
-----------

### Another deeper heading

Paragraphs are separated
by a blank line.

Leave 2 spaces at the end of a line to do a  
line break

Text attributes *italic*, **bold**, ` +
' `monospace`' + `,  ~~strikethrough~~ .

Shopping list:

  * apples
  * oranges
  * pears

Numbered list:

  1. apples
  2. oranges
  3. pears

The rain---not the reign---in
Spain.

 *[Lavios](kdsbjhsdbhjfbdjbs)*`


const App = React.createClass({
    getInitialState() {
        return {
            data: example
        }
    },
    updateVal(e) {
        this.setState({
            data: e.target.value
        });
    },
    render() {
        return (
            <div id="app">
                <div id="app-inside-first">
                    <textarea rows='35' cols='20' value={this.state.data} onChange={this.updateVal}/>
                </div>
                <div id="app-inside-second">
                    <Markdown stats={this.state.data} />
                </div>
            </div>
        )
    }
});

const Markdown = React.createClass({
    render() {
        let render_content = markdown.toHTML(this.props.stats);
        return (
            <div dangerouslySetInnerHTML={{__html: render_content}} />
        )
    }
});

ReactDOM.render(<App />, document.getElementById("container"));

Here's the jsfiddle

Answer 1

You'll need to use a ternary statement to switch between rendering the textarea and the HTML based on the app's state. I've updated the <App /> component to show this: the key part is the { this.state.showHtml ? this.renderHtml() : this.renderTextarea() } { this.state.showHtml ? this.renderHtml() : this.renderTextarea() } line. This checks whether showHtml is set; if so, it renders the HTML version, and if not, renders the textarea instead.

I also added a button which toggles the showHtml state, and moved the textarea and HTML components to separate functions - you'll need to do a bit of tidying up but this should give you the gist.

const App = React.createClass({
    getInitialState() {
        return {
            data: example
        }
    },
    updateVal(e) {
        this.setState({
            data: e.target.value
        });
    },

    // render the output
    renderHtml() {
        return (
            <div dangerouslySetInnerHTML={{__html: render_content}} />
        );
    },

    // render the textarea
    renderTextarea() {
        return (
            <textarea rows='35' cols='20' value={this.state.data} onChange={this.updateVal}/>
        );
    },

    // toggle the showHtml state when the button is clicked
    handleClick() {
        this.setState({ showHtml: !this.state.showHtml });
    },

    render() {
        return (
            <div id="app">

                // switch between textarea and output on click
                <button onClick={ this.handleClick }>Show HTML</button>

                <div id="app-inside-first">

                    // key bit! if this.state.showHtml is true, render 
                    // output, otherwise render textarea
                    { this.state.showHtml ? this.renderHtml() : this.renderTextarea() }
                </div>
                <div id="app-inside-second">
                    <Markdown stats={this.state.data} />
                </div>
            </div>
        )
    }
});