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 — Richa
– Richa, Commented Dec 14, 2017 at 7: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
– Shubham Khatri, Commented Dec 14, 2017 at 7: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
– A.S.J, Commented Dec 14, 2017 at 7:34

Stanislav Bozhanov · Accepted Answer · 2017-12-14 07:41:09Z

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, 2017 at 7:41

Stanislav Bozhanov

273 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A.S.J Over a year ago

And for the OnClickFunction() I could use a regular old javascript function?

NValchev Over a year ago

on the onClickFunction you should probably set state e.g. collapsed and return null in the render function if collapsed is true

A.S.J Over a year ago

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

Stanislav Bozhanov Over a year ago

Yes, you can write regular JavaScript there. It's a Javascript class after all it just extends the React.Component class

jovi De Croock · Accepted Answer · 2017-12-14 07:49:07Z

1

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

answered Dec 14, 2017 at 7:49

jovi De Croock

6253 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to incorporate regular JavaScript into ReactJS application?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related