How To Call React Js Function Or Pass Arguments To React Js From Normal JS/HTML?
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.
Answer
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
.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM