Open DaCao opened 1 year ago
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:
formState.commentBody
Textarea
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 :
<textarea>
<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:
TextareaAutoSize
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?
This component renders <textarea/> and that doesn't accept any children. You are looking for a library support contenteditable elements
<textarea/>
contenteditable
I am using it like this:
what gets displayed in the textarea is just
formState.commentBody
andTextarea
is defined as:Now, instead of passing a string (
formState.commentBody
) as value intoTextarea
, I want to pass some jsx code:into
<textarea>
as its children, such that it would be equivalent to :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:However it is displaying:
[object Object]
Why is this happening?