How do I pass this.props.children to Textarea

Question

I am passing this.props.childred in textarea using defaultValue but it is giving me Error Uncaught Error: If you supply defaultValue on a , do not pass children.

what is the other alternative or is there a better way of bassing the values

import React, {Component} from 'react';

class Update extends Component {

    constructor(props){
        super(props);
        this.state = {
            editing:false
        }

        this.renderEdit = this.renderEdit.bind(this)
    }

    edit(){
        this.setState({
            editing:true
        })

    }
    remove(){
        alert("remove")
    }
    save(){
        this.setState({
            editing:false
        })
    }

    renderNormal(){
        return (
            <div className="container">

        <div className="content"> {this.props.children}</div>
        <button onClick={this.edit.bind(this)} className="edit" >Edit </button>
        <button onClick={this.remove} className="remove" >Remove </button>
        </div>
        );

    }
    renderEdit(){

        console.log( 'this.props ', this.props)

console.log( 'this.props.children ', this.props.children)

        return (
        <div className="container">



        <textarea ref="newText" defaultValue={this.props.children} > </textarea>
        <button onClick={this.save.bind(this)} className="edit" >Save </button>
        </div>
        );

    }

    render(){
        var great = "awesome "

        if(this.state.editing){
             return this.renderEdit();
        }else{
            return this.renderNormal();
        }

    }
}
export default Update;

Answer 1

Use self-closing syntax like this:

<textarea ref="newText" defaultValue={this.props.children}/>

Or actually, you can just remove the space between <textarea> tags as well.