This question already has answers here:
Changing style of a button on click
(6 answers)
Closed 3 years ago.
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?
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
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);
}
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);
}
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>
)
}
}
Related
Here is usually how an image is imported in react
import React, { Component } from "react";
import smallclear from "../images/small/smallClearLaptop.jpeg";
class Images extends Component{
constructor(props) {
super(props);
}
render(){
return(
<div>
<img src={smallclear}></img>
</div>
);
}
}
Instead of directly referring to the image as the name itself I want to use props to build the name using strings so in the render I want to do:
render(){
// this prints smallclear
imgName= this.props.size + this.props.material;
return(
<div>
<img src={imgName}></img>
</div>
);
}
The image is not appearing when I do it the second way. I'm only doing this way because I have to display the image conditionally and that will require a lot of if statements. Is there any way to refer to the imported images without directly naming them in the src?
I'm trying to pass the path of an image to a child component in react and then provide that path as the source attribute in the child component. When I hardcode the path in the child it works, but when I use template literal it does not.
Below is the code snippet. I am unable to understand why the template literal is not working
import React, {Component} from 'react';
class MenuItem extends Component{
render(){
// the below 2 lines print exactly the same thing, i.e., string ../data/icons/table.png
console.log(typeof `${this.props.icon}`, `${this.props.icon}`);
console.log(typeof "../data/icons/table.png", "../data/icons/table.png");
return (
<div className = "sidemenu menu-item">
<img src={require("../data/icons/table.png")} /> //this works
<img src={require(`${this.props.icon}`)} /> //Error: Cannot find module '../data/icons/table.png'.
{this.props.name}
</div>
)
}}
You can load images like modules, if you are using a bundler (like webpack, or yarn) in the same way that API modules.
import React, {Component} from 'react';
import table from './data/icons/table.png';
class MenuItem extends Component{
render(){
return (
<div className = "sidemenu menu-item">
<img src={table} />
</div>
)
}
}
I'm using the example here
https://github.com/zeit/next.js#custom-document
and I want to change the custom_class on the body tag
I have tried passing props on calling components but nothing works. I want to add a 'dark' class based on some condition but I have no idea how to change this.
EDIT:
I'm not sure this is possible. After getting help from the nextjs slack channel I was told
"Pages get rendered client side with next/link
And body is not touched after server side rendering"
I'm going to try and wrap things in another tag that I generate and try and change that.
The cleanest solution I found is not declarative, but it works well:
import Head from "next/head"
class HeadElement extends React.Component {
componentDidMount() {
const {bodyClass} = this.props
document.querySelector("body").classList.add(bodyClass || "light")
}
render() {
return <Head>
{/* Whatever other stuff you're using in Head */}
</Head>
}
}
export default HeadElement
With this Head component you would pass in "dark" or "light" (following the question's example for light/dark themes) as the bodyClass prop from the page.
As of current Next (10) and React (17) versions, If you'd like to change the body class from a page, you can can do it like this:
// only example: maybe you'll want some logic before,
// and maybe pass a variable to classList.add()
useEffect( () => { document.querySelector("body").classList.add("home") } );
Please note that useEffect is a Hook, so it can be used only in modern function components, not class ones.
The useEffect Hook can be used instead of the 'old' componentDidMount LifeCycle.
https://reactjs.org/docs/hooks-effect.html
https://reactjs.org/docs/hooks-overview.html
https://reactjs.org/docs/components-and-props.html
The only way to directly access the body tag on Next js is via the _document.js file but this file is rendered server side as stated in the Documentation.
The work around I suggest is to access the body tag from the component directly. Example:
const handleClick = (e) => {
document.querySelector('body').classList.toggle('dark')
}
<div onClick={handleClick}>Toggle</div>
The solution I came up with for my situation where I don't need a lot of unique body classes was to create a component called BodyClass.js and import that component into my Layout.js component.
BodyClass.js
import { Component } from 'react';
class BodyClass extends Component {
componentDidMount() {
if (window.location.pathname == '/') {
this.setBodyClass('home');
} else if (window.location.pathname == '/locations') {
this.setBodyClass('locations');
}
}
setBodyClass(className) {
// remove other classes
document.body.className ='';
// assign new class
document.body.classList.add(className);
}
render() {
return null;
}
}
export default BodyClass;
Layout.js
import Header from './Header';
import Footer from './Footer';
import BodyClass from '../BodyClass';
const Layout = ({ children }) => {
return (
<React.Fragment>
<BodyClass />
<Header />
{children}
<Footer />
</React.Fragment>
)
}
export default Layout;
Unfortunately, next/head does not allow specifying body class like React Helmet does:
<Helmet>
<body className="foo"/>
</Helmet>
Luckily, you can use this.props.__NEXT_DATA__.props.pageProps inside _document.js to get access to the page props and use them to to set the class on the <body> element:
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
console.log('pageProps => ', pageProps);
return (
<Html>
<Head />
<body className={pageProps.bodyClassName}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
More info here.
Directly, it's not possible. But with another way, you can use framework like tailwind and insert the class directly in your css.
Here an example using tailwind:
.dark {
background-color: black;
color: white;
}
body {
#apply dark
}
It's not exactly the answer you are looking for, but I was able to accomplish the same thing functionally by passing a prop through the component which then updates a class on a top-level element that wraps everything in my app and sits just under the . This way each page can have it's own unique class and operates the same way I'd use a body class.
Here is where I pass the prop through
<Layout page_title={meta_title} page_desc={meta_desc} main_class={'contact_page'}>
And here is where I use it in the Layout component:
<main className={props.main_class}>
<Header page_title={props.page_title} page_desc={props.page_desc} />
{props.children}
<Footer />
</main>
This is my CSS only solution:
(I first looked at https://stackoverflow.com/a/66358460/729221 but that felt too complex for changing a bit of styling.)
(This uses Tailwind CSS, but does not need to.)
index.css:
body:has(#__next .set-bg-indigo-50-on-body) {
#apply bg-indigo-50;
}
layout.tsx:
//…
return (
<div className="set-bg-indigo-50-on-body">{children}</div>
)
This will work, as long as that div is a direct parent of <div id="__next">. Otherwise you need to update the css :has-rule.
In order to study the react framework, I've been developing a simple web application to rate books. It's currently looking like this:
And the idea of the side bar is simple enought: it's width will be 0 when hidden, and when I click a open menu button it will be set to another width.
The code behind it all is looking like this:
import React from 'react';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import home from '../../image/side-nav/home.png';
import list from '../../image/side-nav/list.png';
import '../../css/SideNavBar.css'
import * as utils from '../../scripts/utils.js';
const SideNavBar = () =>{
return(
<Router>
<div>
<span className="spanOpen" onClick={utils.openNav()}>☰</span>
<div className="sidenav">
<a className='closebtn' onClick={utils.closeNav()}>×</a>
<ul>
<li>
<Link to='/'><img src={home} alt='Home' /><span className='h-item'>Home</span></Link>
</li>
<li>
<Link to='/books'><img src={list} alt='Books' /><span className='b-item'>Books</span></Link>
</li>
</ul>
<div className='sidenav-footer'>
<hr />
<small>Pelicer © 2018</small>
</div>
</div>
</div>
</Router>
);
}
export default SideNavBar;
And here is the code of the util.js file, which contains the the fucntions to change:
export function openNav() {
// document.getElementsByClassName("sidenav")[0].style.width = "315px";
}
export function closeNav() {
// document.getElementsByClassName("sidenav")[0].style.width = "0";
}
But when I run it, I get the error: TypeError: Cannot read property 'style' of undefined. It happens because it is trying to change the width of somethings that has not yet been created. What I want to do, and tried using componentDidMount, is to import the JavaScript after the HTML has been rendered, in a way that when it sets the width, the component is already there. Can someone help out in a solution?
You're calling the utils.xyz functions too soon. This:
<span className="spanOpen" onClick={utils.openNav()}>☰</span>
calls utils.openNav and uses its return value as the value of the onClick. You probably meant:
<span className="spanOpen" onClick={utils.openNav}>☰</span>
(without the ()) to just refer to the function. That will work if utils.openNav doesn't need this to refer to utils during the call. If it does need this to be utils during the call:
<span className="spanOpen" onClick={() => utils.openNav()}>☰</span>
...which defines a function and uses that function as the value of onClick.
In that case where this matters, probably better to change that functional component to a class component, create that function once, and reuse it:
class SideNavBar extends React.Component {
constructor() {
this.openNav = () => utils.openNav();
// ...
}
// ...
}
and then in render:
<span className="spanOpen" onClick={openNav}>☰</span>
I'm sure im missing some key element of understanding because this file gets exported and used in another file and then that is exported to another file and then that last file in the chain is what is sent to react.DOM. but why can't I make my components in a function in this file and have them be rendered. I'm not understanding something about the chain and how many exported files you can have and how i guess nested they can be.... help please. Cause if I do this at the surface level of the file chain it works fine but not this far down...
import React, { Component } from 'react';
import './Css_files/OfficeComponent.css';
class OfficeComponent extends Component {
pic_span_nurse(props){
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
render() {
return (
<div>
<pic_span_nurse/>
</div>
);
}
}
export default OfficeComponent;
I am very surprised doing <pic_span_nurse/> works at all, in any context.
I think you're mistaking the concept of what a Component is. A method inside a Component is not considered a component. It is still a method. Which means you have to render pic_span_nurse like you would when you return a method. This should definitely work:
{this.pic_span_nurse()}
The curly braces mean it's JavaScript code that should be interpreted, rather than literal text.
Also, JavaScript style guides encourage (read: must) naming to be done in camelcase, not underscores.
You can either create a separate component and use it in your code.
import React,{Component} from 'react';
import './Css_files/OfficeComponent.css';
const Pic_span_nurse =(props)=>{
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
class OfficeComponent extends Component {
render() {
let compProps = {};//the props of the Pic_span_nurse component
return (
<div>
<Pic_span_nurse {...compProps}/>
</div>
);
}
}
export default OfficeComponent;
Or you can use a function call to render the necessary html.
import React, { Component } from 'react';
import './Css_files/OfficeComponent.css';
class OfficeComponent extends Component {
pic_span_nurse=(props)=>{
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
render() {
return (
<div>
{this.pic_span_nurse(this.props)}
</div>
);
}
}
export default OfficeComponent;