How to call react js function or pass arguments to react js from normal JS/HTML?

- 1 answer

Ad

I am developing a web app where I need to do certain things in React JS. I have written the react js code.

But I want it to be called only when a button is clicked. How to do this?

I read the tutorial but still couldn't figure out this.

Please help me. Struck for 2 hours.

Ad

Answer

Ad

If you wish to render a <ReactComponent/> at <div id="mountPoint"></div> using a button click and wish to pass an Object data to React, this should solve your problem.

The button below is not rendered using React. There must also be a mount point specified beforehand where React will mount the <ReactComponent/>:

<button onclick=ReactRender()> Render React </button>
<div id="mountPoint"></div>

The button calls a function ReactRender() which does all the rendering.

//Now to render React
var ReactRender = function(){
  // data is an Object which you wish to pass to React
  ReactDOM.render(<ReactComponent data={data}></ReactComponent>, mountPoint);
}

The data you have passed from outside React will be available as this.props.data inside ReactComponent.

Ad
source: stackoverflow.com
Ad