0

I am very new to reactjs and javascript in general, and I'm trying to figure out how to get this simple js code to work in my reactjs file. I want the text to turn red onClick.

I have tried: Creating an external js file and importing it using Helmet to insert a tag 

import React, { Component } from 'react';
import './about.css';
import logo from './S54 Logo 2.svg';
import { Helmet } from "react-helmet";
import aboutJS from './about';

export default class About extends Component {
    render() {
        return (
            <div id="about-page">
                <Helmet>
                    <script>
                        {'aboutJS'};
                    </script>
                </Helmet>
                <img id="about-page-logo-img" src={logo} />
                <h2 id="mission-statement" onclick="myFunction()">
                    Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                </h2>
            </div>
        )
    }
}

this was the js file 

export function myFunction() {
    document.getElementById("mission-statement").style.color = "red";
}

Ive also tried adding that js code straight into the script tag, instead of importing the file but that didn't work.

I tried putting a tag for that external js file I created into the of my index.html file, and calling the function in my reactjs file.

Nothing is working. Where and how should I add this code?

zelmi
  • 3
  • 1
  • 3

4 Answers4

2

In JSX, props use this syntax: propName={...} with strings being an exception, where you can do propName="...".

So you should just be able to do onClick={myFunction}

Edit: you might have to do onClick={myFunction.bind(this)} to get your desired effect.

Edit: fixed Camel Case

Nils Backe
  • 138
  • 7
1

Zelmi, React uses JSX, which means Javascript XML. You can write JS directly into the component like this:

import React, { Component } from 'react';
import './about.css';
import logo from './S54 Logo 2.svg';
import aboutJS from './about';

export default class About extends Component {

    myFunction() {
        document.getElementById("mission-statement").style.color = "red";
    }

    render() {
        return (
            <div id="about-page">
                <Helmet>
                    <script>
                        {'aboutJS'};
                    </script>
                </Helmet>
                <img id="about-page-logo-img" src={logo} />
                <h2 id="mission-statement" onclick="myFunction()">
                    Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                </h2>
            </div>
        )
    }
}

And thus call the myFunction from anywhere in the page.

You also need to understand how React and the VirtualDOM work, start by reading the docs.

React does not work with the standard html onclick attribute but rather with the React prop onClick, which takes in a function as well, but you need to show React XML that you are calling your JS code by opening a {} code scope like so:

        <div id="about-page">
                    <Helmet>
                        <script>
                            {'aboutJS'};
                        </script>
                    </Helmet>
                    <img id="about-page-logo-img" src={logo} />
                    <h2 id="mission-statement" onClick={this.myFunction}>
                        Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                    </h2>
                </div>

EDIT

You also unfortunately need to bind your function when using React Class component, in the constructor method:

 constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.myFunction = this.myFunction.bind(this);
  }
P Fuster
  • 2,224
  • 1
  • 20
  • 30
1

Part of the point of React is to abstract away the DOM so you don't have to do things like getElementById and all that.

A simple way to accomplish what you want to do would be something like this:

export default class About extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color: "black"
        }
    }
    myFunction = () => {
        this.setState({color: "red"});
    }
    render() {
        return (
            <div id="about-page">
                <img id="about-page-logo-img" src={logo} />
                <h2 onClick={this.myFunction} style={{color: this.state.color}}>
                    Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                </h2>
            </div>
        )
    }
}

Note that if your setup doesn't allow arrow functions in class properties, you may have to bind this to the function like so:

constructor(props) {
        super(props);
        this.state = {
            color: "black"
        }
        this.myFunction = this.myFunction.bind(this);
    }
Miles Grover
  • 609
  • 3
  • 5
0

Zelmi, You can import { myFunction } from 'path/to/your/jsfile.js' which allows you to use myFunction any where in your JS file where your component lives.

Also, use onClick instead of onclick, wrap your function with Carely Braces {} instead of Quotes ""

import React, { Component } from 'react';
import './about.css';
import logo from './S54 Logo 2.svg';
import { myFunction } from 'path/to/your/jsfile.js'; //HERE
import { Helmet } from "react-helmet";
import aboutJS from './about';

export default class About extends Component {
    render() {
        return (
            <div id="about-page">
                <Helmet>
                    <script>
                        {'aboutJS'};
                    </script>
                </Helmet>
                <img id="about-page-logo-img" src={logo} />
                <h2 id="mission-statement" onClick={myFunction}>
                    Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                </h2>
            </div>
        )
    }
}
Sultan H.
  • 2,908
  • 2
  • 11
  • 23