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>
)
}
}
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?
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>
)
}
}
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;
I followed the installation instructions on https://www.npmjs.com/package/reactjs-mappletooltip
Nothing from the MappleToolTip renders or even shows up in the page source when I inspect the page source in Chrome. What am I doing wrong? I tried to include as a separate component as well with same results, nothing from MappleToolTip rendering.
My Code:
(NOTE: code has been shortened for readability)
ToolTip.js
import React from 'react';
var MappleToolTip = require('reactjs-mappletooltip');
export const PageWithToolTip = () => {
return(
<div>
<MappleToolTip>
<div>
Show Mapple Tip on this
</div>
<div>
Hey! this is damn easy
</div>
</MappleToolTip>
</div>
);
}
FoodMenu.js
import React, {Component} from 'react';
import {PageWithToolTip} from './ToolTip';
class FoodMenu extends Component{
render(){
return(
<div className="section-meals">
<div className="row">
<h2>
- Menu -
</h2>
</div>
{PageWithToolTip}
</div>
)
}
}
export default FoodMenu;
Thank you!
Just <PageWithToolTip/> instead of {PageWithToolTip}.
And change import to import MappleToolTip from 'reactjs-mappletooltip';
I'd like to add a custom class to my Button component in app I'm learning react on.
In my Form.js I have
import React, {Component} from 'react';
import Button from './Button';
import styles from '../css/LoginElements.css';
class Form extends Component {
render() {
const click = this.props.onSubmit;
return(
<div className={styles.form}>
<Button
name="Register"
className="register"
onClick={click} />
</div>
);
}
}
export default Form;
And in the Button.js I have
import React from 'react';
import styles from '../css/LoginElements.css';
const Button = ({name, onClick, className }) => (
<div className={styles.wrapper}>
<div className="field">
<div className={className? styles.className : styles.button} onClick={onClick}>{name}</div>
</div>
</div>
);
export default Button;
The problem is that styles.className will work if I put .className in my LoginElements.css file, and not .register, as I would like.
What do I need to do to use the class name from the button property as a class? And not just register but so that it's like LoginElements__register__34Kfd (locally scoped)?
Maybe I'm not reading this correctly, but I think the problem is that you're using dot notation to access the className from styles instead of brackets.
Can you update Button.js to
<div className={className? styles[className] : styles.button}
Dot notation will not recognize className as a variable but instead will treat it literally as the property name