How to incorporate regular JavaScript into ReactJS application?

Question

I'm building an application with ReactJS and would like to also use regular JavaScript for a few things, however, I'm having trouble figuring out how I would be incorporating regular JavaScript.

Let's say I have the following React-component:

class Example extends React.Component {
    render() {
        return (
            <h1>I want to be hidden onclick</h1>
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

How would I use JavaScript in this case to hide the element onclick? Is that even possible?

I tried looking it up, however, I could only find very little results that, unfortunately, did not help very much. For example, one individual suggested defining a global function in seperate script-tags in the same file but I'm not sure if that's a good practice.

Is it common to use regular JavaScript and ReactJS in combination? How would I go about implementing it in this example?

Possible duplicate of [Using a regular javascript library inside a React component](https://stackoverflow.com/questions/42038327/using-a-regular-javascript-library-inside-a-react-component) — ric, Dec 14 '17 at 07:27
You could use javascript, but you should prefer a more React way for doing it, like onClick event, setState storing a variable isVisible and then either use it in className or do conditional rendering — Shubham Khatri, Dec 14 '17 at 07:34
@ric while that question is helpful in my case, unfortunately it does not further explain where to define the function etc. (I suppose .activatemywidget() is the function, but where did that come from, where is it defined). Therefore I must object your claims. — A.S.J, Dec 14 '17 at 07:34

score 1 · Answer 1 · answered Dec 14 '17 at 07:41

1

class Example extends React.Component {
    onClickFunction() {}

    render() {
        return (
            <h1 onclick={onClickFunction}>I want to be hidden onclick</h1>
    );
    }
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

You can write JS in the React element by opening and closing curly brackets

answered Dec 14 '17 at 07:41

Stanislav Bozhanov

27
2

And for the OnClickFunction() I could use a regular old javascript function? – A.S.J Dec 14 '17 at 07:42
on the onClickFunction you should probably set state e.g. `collapsed` and return `null` in the `render` function if `collapsed` is true – NValchev Dec 14 '17 at 07:44
But technically I could use JS? Because I need to do an XMLHttpRequest to get data from an xml-file (in my actual project) but I wasn't sure if I can just use JavaScript or if there's a react-way of doing it – A.S.J Dec 14 '17 at 07:48
Yes, you can write regular JavaScript there. It's a Javascript class after all it just extends the React.Component class – Stanislav Bozhanov Dec 14 '17 at 09:13

score 1 · Answer 2 · answered Dec 14 '17 at 07:49

Example of how you can do this with just react is:

class Example extends React.Component {
constructor(props) {
  super(props)
  this.state = { visibleTitle: false }
}
onClick = () => {
  this.setState({ visibleTitle: !this.state.visibleTitle })
}
render() {
    const { visibleTitle } = this.state; 
    return (
    <div>
        {visibleTitle && <h1 onClick={this.onClick}>I want to be hidden onclick</h1>}
    </div>
    );
}
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

Ofcourse, modern state management libraries can replace the this.state

How to incorporate regular JavaScript into ReactJS application?

2 Answers2