How to render react component as plain text-CodePudding

Sorry about stupid question.

I have react app. Writing documentation for my components. And I want to insert my component as plain text and I can't find way. ex:

import Input from "../components/input";
function DocumentationPage () {
  return (<div>
    Input:
    usage:
    <code> <Input type='login' label={'Login'} value={value} onChange={onChange}></Input></code>
    <Input type='login' label={'Login'}></Input>
  </div>)
}

So I want <Input...> inside the code tag to be rendered as plain text.

CodePudding user response：

Try to wrap <Input type='login' label={'Login'} value={value} onChange={onChange}></Input> in brackets and quotes to render it as a string, like this:

import Input from "../components/input";
function DocumentationPage () {
  return (<div>
    Input:
    usage:
    <code>{'<Input type='login' label={'Login'} value={value} onChange={onChange}></Input>'}</code>
    <Input type='login' label={'Login'}></Input>
  </div>)
}