Send rendered component output to backend

Question

I have a react component that renders the answers of a contact form and presents them in the page. eg:

  const Quote = ({fields}) => {
    return (
      <>
        <div>
          Business Type: {fields.businesstype.value}
        </div>
        ....
      </>
    )
  }

I need to send the rendered data to the php backend in order to send them as an email.
The question: Can I use the same component to get the rendered data (in a variable) and send them to backend (with axios)

Thank you for your time.

score 0 · Accepted Answer · answered Jan 24 '21 at 13:17

0

You can set ref to target Component (in this case Quote) and use it like this: ReactDOM.findDOMNode(quoteRef).innerHTML

to get rendered HTML code of that component

take a look at this

answered Jan 24 '21 at 13:17

FMoosavi

150
1
11

Thank you your answer. But isn't dangerous to use innerHTML? – JohnF Jan 24 '21 at 13:19
reading `innerHTML` is perfectly safe; it's setting `dangerouslySetInnerHtml` that can potentially introduce security holes in your React app. – Dan O Jan 24 '21 at 14:18

score 0 · Answer 2 · answered Jan 24 '21 at 14:15

you can add ref to your component and have full access on that like this

  const Quote = ({fields}) => {
    const ref = React.useRef()
    return (
  <>
    <div ref={ref}>
      Business Type: {fields.businesstype.value}
    </div>
    ....
  </>
)
}

Send rendered component output to backend

2 Answers2