在输入占位符中调用组件

Question

I'm currently trying to call a React component in the position of a text placeholder, but It returns [Object object]. Below is the input

render(){
const myText = this.movingText();
<input placeholder={myText}/>
 }

then this is the function I'm calling with the component typist tag.

movingText() {
  return (
   <Typist>
    Hello this is the text
  </Typist>
    )}

So I'm really trying to call the component and its contents as a placeholder. Any help is much appreciated. Thanks

Answer 1

In your render...

render(){
 const myText = this.movingText();
return(
 <input placeholder={myText}/>

  )
}

Answer 2

Use renderToString from react as below

import { renderToString } from 'react-dom/server';
const myText = renderToString(this.movingText());

return(
 <input placeholder={myText}/>
)
}