CODEWITHSUNDEEP
htmlreactjsreact-bootstrap
JoseCarlosPB
JoseCarlosPB

Reputation: 875

Show editable data with textarea

I'm trying to make something editable with the following code

class RuleDescriptionViewAdmin extends Component {
render(){

    var rule = this.props.rule.description;
    console.log(rule);
    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    </Col>
    <textarea>
        {rule.split('\n').map((item, key) => {
          return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
          })}
    </textarea>

     </div>
    );

    }
}

and I get the following error

textarea can only have at most one child.

Is there a better way to make this editable?

Edit: I've added the following code

<div contentEditable="true" ref={this.divRef}>
        {rule.split('\n').map((item, key) => {
return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
    })}
</div>

and on handleOnClick I'm trying to do this

var text = this.divRef.current.innerText;

Upvotes: 2

Views: 2330

Answers (2)

JoseCarlosPB
JoseCarlosPB

Reputation: 875

After troubles with refs and content editable div I did this with draftJS instead of textarea or div

thanks Chayim for the patience and the answers

just in case someone checks this question with the same problem this is the code I used to show editable text with draftJS.

class RuleDescriptionViewAdmin extends Component {
constructor(props,context){
    super(props,context);
    this.handleOnClick = this.handleOnClick.bind(this);

    const processedHTML = DraftPasteProcessor.processHTML(this.props.rule.description.replace(/\n/g, "<br />"));
    const contentState = ContentState.createFromBlockArray(processedHTML); 
    var editorState = EditorState.createWithContent(contentState);
    var editorState = EditorState.moveFocusToEnd(editorState);
    this.state = {editorState: editorState};
    this.onChange = (editorState) => this.setState({editorState});
}



handleOnClick(event) {
  var url = 'http://localhost:8080/rules/' + this.props.rule.id;
  const blocks =  convertToRaw(this.state.editorState.getCurrentContent()).blocks;
  const value = blocks.map(block => (!block.text.trim() && '\n') ||   block.text).join('\n');
  //do something with value

} 

render(){

    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    <Editor
      editorState={this.state.editorState}
      onChange={this.onChange}
    />
    </Col>

     <Col smOffset={2} mdOffset={1}>
    <Button onClick = {this.handleOnClick}>Update rule</Button>
    </Col>
    </div>
    );

  }
}

Upvotes: 0

Chayim Friedman
Chayim Friedman

Reputation: 71485

Try <div contenteditable="true"> instead of <textarea>.

Upvotes: 2

Related Questions