How to pass JSX code into it as children?

[DaCao]

I am using it like this:

<Textarea
  autoFocus
  placeholder={(formState.commentBody && formState.commentBody !== '') ? formState.commentBody : intl.get('issue_details_placeholder_add_a_comment')}
  value={formState.commentBody}
  onChange={handleChange('commentBody')}
  ref={$textareaRef}
/>

what gets displayed in the textarea is just formState.commentBody and Textarea is defined as:

import React, { forwardRef } from 'react';
import TextareaAutoSize from 'react-textarea-autosize';
import { StyledTextarea } from './Styles';

const Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (
  <StyledTextarea className={className} invalid={invalid}>
    <TextareaAutoSize
      {...textareaProps}
      onChange={event => onChange(event.target.value, event)}
      ref={ref || undefined}
    />
  </StyledTextarea>
));

export default Textarea;

Now, instead of passing a string (formState.commentBody) as value into Textarea, I want to pass some jsx code:

<blockquote>
	this is a customizable text and clickable within textarea 
</blockquote>

into <textarea> as its children, such that it would be equivalent to :

<TextareaAutoSize>
	<blockquote>
		this is a customizable text and clickable within textarea 
	</blockquote>
</TextareaAutoSize>

The final goal is to be able to display block code inside the textarea.
Does this library support it?
How can I achieve this?

I tried to code inside the TextareaAutoSize component directly like this:

const Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (
  <StyledTextarea className={className} invalid={invalid}>
    <TextareaAutoSize
      {...textareaProps}
      onChange={event => onChange(event.target.value, event)}
      ref={ref || undefined}
    >

      <blockquote>
        hahaha
      </blockquote>

    </TextareaAutoSize>
  </StyledTextarea>
));

export default Textarea;

However it is displaying:

[object Object]

Why is this happening?

[Mateusz Burzyński]

This component renders <textarea/> and that doesn't accept any children. You are looking for a library support contenteditable elements