html-react-parser replace onClick

html-react-parser replace example with onClick https://github.com/remarkablemark/html-react-parser/issues/53

by remarkablemark

HTML

<div id="root"></div>

<!-- HTMLReactParser -->
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>

React

const html = `
	<form name="captchasubmit" id="captchasubmit">
  	<label>
  		<input type="radio" onClick="document.getElementById('otp').value='phone';" name="otpselection" value="phone">
      phone method
    </label>
    <br>
    <label>
    	<input type="radio" onClick="document.getElementById('otp').value='email';" name="otpselection" value="email">
      email method
    </label>
    <br>
    <input type="hidden" id="otp" name="otp" value="none">
  </form>
`;

class App extends React.Component {
  render() {
    return (
    	<div>
        {HTMLReactParser(html, {
        replace: domNode => {
          if (domNode.name === 'input') {
          	delete domNode.attribs.onclick;
            return (
              <input
                {...domNode.attribs}
                onClick={() => { document.getElementById('otp').value = domNode.attribs.value }}
              />
            );
          }
        }
      })}

      <button
        onClick={() => { alert(document.getElementById('otp').value); }}
      >
        Get otp value
      </button>
    </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));