Send rendered component output to backend

user_8091607 0
Viewed 59

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.

reactjs
2 Answers

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

user_40381250

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>
    ....
  </>
)
}
user_150288450
Related