Develop Reference

How can I add a local Js file to one of my React Components?

I am re-building my Portfolio Site into an SPA and wanted to add the modals into one of my pages. The JS for them is saved into a "main.js" file and the tag is put in my HTML file. The problem is that it doesn't work and I am not sure why. Let me know if you need more info I am new to this.
Here is the component:
import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
let aScript = props => (
<ScriptTag type="text/javascript" src="../js/main.js" />
)
class Work extends Component {
render() {
return (
<section>
<div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar" data-mcs-theme="dark" id="modal-background">
<div id="modal">
<span id="close-btn">×</span>
<img className="modal-img" src="mockups/mockup.png" alt="expatcolombia" />
<h2 className="modal-title">Expat Colombia</h2>
<div className="modal-text">
<h3>Description</h3>
<p>Expat Service for people moving to Colombia. They provide consultations, tours, and assist in housing.</p>
<h3>Dependencies</h3>
<p>HTML, CSS, Javascript</p>
</div>
<div className="buttons">
Visit
Github
</div>
</div>
</div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar2" data-mcs-theme="dark" id="modal-background2">
<div id="modal2">
<span id="close-btn2">×</span>
<img className="modal-img2" src="mockups/poke-mockup.jpg" alt="expatcolombia" />
<h2 className="modal-title">PokemonAPI</h2>
<div className="modal-text2">
<h3>Description</h3>
<p>Pokemon-themed App with a that includes names, images, and stats of different Pokemons.</p>
<h3>Dependencies</h3>
<p>Javascript, JQuery, Ajax</p>
</div>
<div className="buttons2">
Demo
Github
</div>
</div>
</div>
</div>
<div>
<header className="ScriptHeader">
<div>
<h1>My Work</h1>
</div>
</header>
<section id="work">
{/*****Image size (height) is paramount to keep the photos formatted properly*****/}
{/* Image row 1 */}
<div className="row">
<div className="column">
<div className="container">
<img src={toDoListApp} className="image" alt="to-do-list-api" />
<a href="https://github.com/Drxl95/To-Do-List" target="_blank">
<div className="overlay">
<div className="text">Simple jQuery To Do List App</div>
</div>
</a>
</div>
</div>
<div className="column">
<a id="open-btn2">
<div className="container">
<img src={pokeMockup} className="image" alt="PokemanAPI" />
<div className="overlay">
<div className="text">Pokemon-themed API app <br /></div>
</div>
</div>
</a>
</div>
<div className="column">
<a id="open-btn">
<div className="container">
<img src={ExpatColMock} className="image" alt="expatcolombia.com" />
<div className="overlay">
<div className="text">Expat Colombia</div>
</div>
</div>
</a>
</div>
<div className="column">
<a href="https://github.com/Drxl95/DogAlbum" target="_blank">
<div className="container">
<img src={DogAPIMock} className="image" alt="dogAPI-mockup" />
<div className="overlay">
<div className="text">Dog Album API</div>
</div>
</div>
</a>
</div>
</div>
{/* Image row 2 */}
{/* <div class="row">
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-4.jpg" class="image">
<div class="overlay">
<div class="text">Example 4</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-5.jpg" class="image">
<div class="overlay">
<div class="text">Example 5</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-6.jpg" class="image">
<div class="overlay">
<div class="text">Example 6</div>
</div>
</div>
</a>
</div>
</div> */}
{/* partial */}
</section>
</div>
</section>
)
}
}
export default Work
External JS file
// select the open-btn button
let openBtn = document.getElementById('open-btn');
// select the modal-background
let modalBackground = document.getElementById('modal-background');
// select the close-btn
let closeBtn = document.getElementById('close-btn');
// shows the modal when the user clicks open-btn
openBtn.addEventListener('click', function () {
modalBackground.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn.addEventListener('click', function () {
modalBackground.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground) {
// hides the modal
modalBackground.style.display = 'none';
}
});
// select the open-btn button
let openBtn2 = document.getElementById('open-btn2');
// select the modal-background
let modalBackground2 = document.getElementById('modal-background2');
// select the close-btn
let closeBtn2 = document.getElementById('close-btn2');
// shows the modal when the user clicks open-btn
openBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground2) {
// hides the modal
modalBackground2.style.display = 'none';
}
});
// function addMusic() {
// let navBarLists = document.getElementById('#navBarLists');
// let musicListItem = document.createElement('li');
// }

You have to use import module and extract your desired functions and variables:
import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
// import your js file
import defaultFunction, {secondaryFunction} from '../js/main';

I have made a card and I want to loop the whole card component

I have made 1 card component. Here I want to loop through it, So that I can Use it again and again.
/* CardUI.jsx*/
import React from "react";
import img1 from "../assets/raj.jpg";
import "./Cards.css";
import { FaTshirt, FaLocationArrow } from "react-icons/fa";
import { BsGeoAlt } from "react-icons/bs";
import { GiTakeMyMoney } from "react-icons/gi";
import { MdEventAvailable } from "react-icons/md";
import { IoLogoDesignernews } from "react-icons/io5";
let skills=["Python","mongos","Java"]
/Here I want to loop through Card, so that I can make several card. How Can I achieve that. I Want to achieve loop, so that I do not have to re render card again and again. Here card is the functional component./
const Card= (props) => {
return (
<div className="card container">
<div className="card-body row">
<img src={img1} style={{marginRight:"10px",paddingRight:"10px"}} className="image col-sm-2" alt="raj" />
<div className="col-md-6" style={{textAlign:"left",marginLeft:"-5px",marginRight:"10px",paddingRight:"80px",paddingLeft:"0px"}}>
<h5 style={{ font: "1px",marginBottom:"0px"}}>{props.name}</h5>
<p style={{ font: "0px",marginTop:"0px"}}><MdEventAvailable/> {props.current_availability}</p>
</div>
<h5 className="Rating col-sm-2">9.5</h5>
</div>
<div id="box" className="row box-aligner" style={{marginTop:"-20px"}}>
<div>
<div className="row" style={{marginLeft:"100px"}}>
{
skills.map((skill)=>(
<div className="col-sm-2" style={{ marginRight:"15px",marginLeft:"0px"}}>
<p className="language row-aligner">{skill}</p>
</div>
))
}
</div>
</div>
<div style={{marginRight:"5px",fontSize:"15px", paddingRight:"30px"}}>
< BsGeoAlt/> New Delhi - 9.6km
</div>
</div>
<div id="designation" className="row" style={{marginTop:"-10px"}}>
<div className="col-md-6">
<h1 className="row-aligner" style={{marginRight:"20px",paddingLeft:"25px",marginLeft:"51px"}}>
<FaTshirt/> 4years,2months
</h1>
</div>
<div className="col-sm-6">
<h2 className="city" style={{paddingLeft:"65px", paddingRight:"20px", fontWeight:"normal",marginLeft:"15px"}}><IoLogoDesignernews/> {' '} Interaction Designer</h2>
</div>
</div>
<div id="salary" className="row" style={{marginTop:"-4px"}}>
<div className="col-md-6" >
<h1 className="row-aligner" style={{marginRight:"-4px", paddingLeft:"25px", marginLeft:"10px"}}><GiTakeMyMoney/> $10k-25k/ mo</h1>
</div>
<div className="col-md-6">
<a href="#" class="btn btn-primary">
Hire Now
</a>
</div>
</div>
</div>
);
};
export default Card;
/Card.jsx/
/*Here is the Parent file. Class component has been used here.*/
import React,{Component} from 'react'
import Card from './CardUI'
class Cards extends Component{
render(){
return(
<div className="container-fluid d-flex justify-content-center" style={{marginTop:"100px"}}>
<div className="row">
<div className="col-md-12">
<Card name={"Sara"}
current_availability={"Available"}
workExperience={"4"}
Location={"delhi"}
distance={"9.6 km"}
JobTitle={"Designer"}
/>
</div>
</div>
</div>
)
}
}
export default Cards;

Second Component cannot reload data

Hi i have problem using reactjs to reload the second component in parent component.
I have some 3 file 1 parent component 2 child component to make simple chat website.
The problem is my component Chatroom was not reload/change the data when i click the Chatlist in the second time.
This is my parent.js
import React, { useContext } from 'react'
import $ from 'jquery'
import Wrapper from '../components/wrapper'
import ChatList from './chat-list'
import ChatRoom from './chat-room'
export default class extends React.Component {
constructor(props) {
super(props)
this.state = {
login: 0,
user: null,
tokenChat: '',
roomChat: '',
isToken: false
}
this.clickChat = this.clickChat.bind(this)
}
componentDidMount() {
$('body').addClass('menu-position-side menu-side-left')
}
componentWillUnmount() {
$('body').removeClass('menu-position-side menu-side-left')
}
clickChat(token, room) {
let self = this
self.setState({
tokenChat: token,
roomChat: room,
isToken: true
})
}
render() {
return (
<Wrapper {...this.props} title="Dashboard" selected="dashboard" padding={false}>
{this.state.login == 1 &&
<div className="content-i">
<div className="content-box">
<div className="full-chat-w">
<div className="full-chat-i">
<div className="full-chat-left">
<div className="os-tabs-w">
<ul className="nav nav-tabs upper centered">
...
</ul>
</div>
<ChatList clickChat={this.clickChat} />
</div>
<div className="full-chat-middle">
{
this.state.isToken == false ?
null
:
<ChatRoom token={this.state.tokenChat} room={this.state.roomChat} />
}
</div>
<div className="full-chat-right">
<div className="user-intro">
<div className="avatar"><img alt="" src="/static/doctor-theme/img/avatar1.jpg" /></div>
<div className="user-intro-info">
<h5 className="user-name">John Mayers</h5>
<div className="user-sub">San Francisco, CA</div>
<div className="user-social"><i className="os-icon os-icon-twitter"></i><i className="os-icon os-icon-facebook"></i></div>
</div>
</div>
<div className="chat-info-section">
<div className="ci-header"><i className="os-icon os-icon-documents-03"></i><span>Shared Files</span></div>
<div className="ci-content">
<div className="ci-file-list">
<ul>
<li>Annual Revenue.pdf</li>
<li>Expenses.xls</li>
<li>Business Plan.doc</li>
</ul>
</div>
</div>
</div>
<div className="chat-info-section">
<div className="ci-header"><i className="os-icon os-icon-documents-07"></i><span>Shared Photos</span></div>
<div className="ci-content">
<div className="ci-photos-list">
<img alt="" src="/static/doctor-theme/img/portfolio9.jpg" />
<img alt="" src="/static/doctor-theme/img/portfolio2.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
</Wrapper>
)
}
}
Please Help Thank you.

React & Typescript: Cannot read property '0' of undefined

I recently moved from .jsx to .tsx, and I'm having issues (before moving to typescript, was all working well). The first error is at line: "<Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}>". I suspect there's something related to typescript, but I don't know what. Anybody can help me?
// TaskCard.tsx
//Dependencies
import * as React from 'react';
//Copmponents
import Modal, {ModalProps} from './Modal';
import Input from './Input';
import {IBoard} from './Board';
import PostComment from './PostComment';
export interface IComments{
body: string,
from: string,
date: string,
hour: string
}
export interface ITask{
board: string,
duedate: string,
tag: string,
tagClass: string,
tagText: string,
body: string,
risk: string,
responsable: string
comments: IComments[]
}
export interface TaskProps{
tasks: ITask[]
boards: IBoard[]
}
export interface TaskState{
isOpen: {}
}
class TaskCard extends React.Component<TaskProps, TaskState>{
constructor(props) {
super(props);
this.state = {
isOpen: props.isOpen
};
}
handleToggleModal(key) {
this.state.isOpen[key] = !this.state.isOpen[key];
this.setState(this.state.isOpen);
}
render(){
const { tasks, boards } = this.props;
let __this = this;
return(
tasks && tasks.map(
(tasks, key) =>
<div key={key} className="v-margin no-margin-top card-contour medium" onClick={this.handleToggleModal.bind(__this,key)}>
<div className="row middle-xs caption">
<div className="col-xs-6 no-padding">
<div className="row middle-xs">
<img className="img_icn no-padding-left" src="./assets/img/icn_calendar.svg" alt=""/>
<p className="txt-tertiary-color">{tasks.duedate}</p>
</div>
</div>
<div className="col-xs-6 no-padding">
<div className="row end-xs middle-xs">
<div className={tasks.tagClass + " tag tag_box center-align"}>
<p>{tasks.tag}</p>
<span className="tag_hint">{tasks.tagText}</span>
</div>
</div>
</div>
</div>
<div className="row middle-row v-padding">
<p>{tasks.body}</p>
</div>
<div className="row middle-xs caption">
<div className="col-xs-9 no-padding">
<div className="row middle-xs">
<img className="img_icn no-padding-left" src="./assets/img/icn_target.svg" alt=""/>
<p className="txt-tertiary-color">Riesgos: {tasks.risk}%</p>
</div>
</div>
<div className="col-xs-3 no-padding">
<div className="row middle-xs end-xs">
<img className="img_icn no-padding-left" src="./assets/img/icn_comments.svg" alt=""/>
<p className="txt-tertiary-color">{tasks.comments.length}</p>
</div>
</div>
</div>
<Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}>
<div className="modal_container">
<section className="modal_section">
<div className="row middle-xs no-margin-left no-margin-right modal_section_title">
<object width="20px" height="20px" data="./assets/img/icn_objetive-blue.svg"></object>
<div className="col-xs start-xs">
<h4 className="semi-bold">Objetivo</h4>
</div>
</div>
<div className="col-xs-12 modal_section_content">
<p>{tasks.body}</p>
</div>
</section>
<section className="modal_section">
<div className="row middle-xs no-margin-left no-margin-right modal_section_title">
<object width="20px" height="20px" data="./assets/img/icn_target-blue.svg"></object>
<div className="col-xs start-xs">
<h4 className="semi-bold">Target</h4>
</div>
</div>
<div className="col-xs-12 modal_section_content">
<p>Riesgos / Problemas = {tasks.risk}%</p>
<div className="table v-margin">
<div className="row middle-xs">
<div className="col-xs">
<p className="table_head">Fecha de vencimiento</p>
<p className="table_body">{tasks.duedate}</p>
</div>
<div className="col-xs">
<p className="table_head">Tipo de objetivo</p>
<p className="table_body">{tasks.tagText}</p>
</div>
<div className="col-xs">
<p className="table_head">Responsable</p>
<p className="table_body">{tasks.responsable}</p>
</div>
<div className="col-xs-12 v-margin no-margin-bottom">
<p className="table_head">Estado de objetivo</p>
<div className="row middle-xs">
{
boards && boards.map(
(boards, board) =>
<div key={board} className="col-xs-3">
<Input name="state" type="radio" classNameCustom="input_radio"
checked={boards.id == tasks.board} value={boards.id} id={boards.id}/>
<label htmlFor={boards.id}>{boards.name}</label>
</div>
)
}
</div>
</div>
</div>
</div>
</div>
</section>
<section className="modal_section">
<div className="row middle-xs no-margin-left no-margin-right modal_section_title">
<object width="20px" height="20px" data="./assets/img/icn_activity-blue.svg"></object>
<div className="col-xs start-xs">
<h4 className="semi-bold">Actividad</h4>
</div>
</div>
<div className="col-xs-12 modal_section_content">
{
tasks.comments.length!=0 ?(
tasks.comments.map((comments, i) => {
return(
<div key={i} className="comment">
<div className="comment_box">
<p>{comments.body}</p>
</div>
<div className="comment_data row no-margin middle-xs">
<div className="col-xs start-xs">
<p>{comments.from}</p>
</div>
<div className="col-xs end-xs">
<p>{comments.date} a las {comments.hour} hs.</p>
</div>
</div>
</div>
)
})
):null
}
</div>
</section>
</div>
<PostComment />
</Modal>
</div>
)
)
}
}
export default TaskCard;
And here is the Modal component
//Modal.tsx file
//Dependencies
import * as React from 'react';
export interface ModalProps{
onClose: any,
show: boolean,
children: any
}
export default class Modal extends React.Component<ModalProps>{
handleStopPropagation = (e) =>{
e.stopPropagation();
}
render(){
const {onClose, show, children} = this.props;
// Render nothing if the "show" prop is false
if(!this.props.show) {
return null;
}
return (
<div className="modal_bkg" onClick={this.handleStopPropagation}>
<div className="modal_bkg_container row middle-xs center-xs">
<div className="modal card">
<div className="right-align modal_close">
<button className="btn btn_close" onClick={this.props.onClose}>x</button>
</div>
{this.props.children}
</div>
</div>
</div>
);
}
}

I'm unable to run the code at the moment, but as far as I can see the TaskCard.render function is using Array.map function, which is executing a callback function for every task item.
And there is a problem, because in the callback this is not the this you think it is :). According to documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map you can use map overload that accepts this.
I believe that if you do
return(tasks && tasks.map(
(tasks, key) => <div>put your component markup here</div>,
this)
);
inside TaskCard.render function you should see the error no more.

A friend helped me with this and now it's working. The first problem was the state "isOpen" at start always is undefined so, that's why runtime was throwing error "Cannot read property '0' of undefined". So now, "isOpen" is and empty object and the final constructor looks like this:
constructor(props) {
super(props);
this.state = {
isOpen: {}
};
}
After this, another error was "boards.map is not a function" and that was because I was passing the array "boards" as object. Changing for "board" was enought. So the final code was:
boards && boards.map(
(board, key) =>
<div key={key} className="col-xs-3">
<Input name="state" type="radio" classNameCustom="input_radio"
checked={board.id == task.board} value={board.id} id={board.id}/>
<label htmlFor={board.id}>{board.name}</label>
</div>
)
Anyway, thanks for trying to help me. Regards!

Expected onClick listener to be a function, instead got type string Unknown event handler property onclick. Did you mean `onClick`?

import React from 'react';
import './styles/index.css';
import ReactDOM from 'react-dom';
import AboutUs from './about.js';
import ContactForm from './contact.js';
import MainBody from './mainbody.js';
import Footer from './footer.js';
class Header extends React.Component
{
constructor(props)
{
super(props);
this.opengdMenu=this.opengdMenu.bind(this);
this.openDesktopAboutusForm=this.openDesktopAboutusForm.bind(this);
this.openDesktopContactForm=this.openDesktopContactForm.bind(this);
this.loadHomePage=this.loadHomePage.bind(this);
this.state={
isMenuOpen:false //state variable to change the state of menu from open to close and vice-versa.
};
}
opengdMenu()
{
this.setState({isMenuOpen:!this.state.isMenuOpen});
if(this.state.isMenuOpen===true)
{
var about_us = document.getElementById('about');
about_us.setAttribute("style","display:none");
}
}
openDesktopAboutusForm()
{
ReactDOM.render(<AboutUs />,document.getElementById('about'));
}
openDesktopContactForm()
{
ReactDOM.render(<ContactForm />,document.getElementById('about'));
}
loadHomePage()
{
this.render()
ReactDOM.render(<MainBody />, document.getElementById('mainbody'));
ReactDOM.render(<Footer />,document.getElementById('footer'));
}
render()
{
if(!this.state.isMenuOpen) //this part will render the header with the menu closed.
{
return(
<div>
<div className="row">
<div className="gd_header_section body_fixed_content hidden-xs hidden-sm">
<div className="gd_header_default_container" id="gd_header_default_container">
<img className="gd_header_logo_icon" onClick={this.loadHomePage} src={require('./images/GD_Logo_white.png')} alt="gd logo_icon_ desktop" />
<img className="gd_header_menu_icon" onClick={this.opengdMenu} src={require('./images/menu_icon.png')} alt="gd menu icon" />
<div className="gd_header_login">LOGIN</div>
</div>
</div>
</div>
<div className="row">
<div className="gd_small_header_section body_fixed_content visible-xs visible-sm">
<div className="gd_small_header_default_container" id="gd_small_header_default_container">
<img className="gd_small_header_logo_icon1" src={require('./images/GD_Logo_white.png')} alt="GD logo white" onClick={this.loadHomePage} />
<img className="gd_small_header_menu_icon" src={require('./images/menu_icon.png')} alt="small menu icon" onClick={this.opengdMenu} />
</div>
</div>
</div>
</div>
);
}
else //this part will render the header with the menu opened.
{
return(
<div className="row">
<div className=" col-md-12 col-xs-12 col-sm-12 gd_header_section body_fixed_content hidden-xs hidden-sm">
<div className="gd_header_collapsed_container" id="gd_header_collapsed_container">
<img className="gd_header_logo_icon" src={require('./images/GD_Logo_gray.png')} alt="gd gray logo" onClick={this.loadHomePage} />
<img className="gd_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="cross icon" onClick={this.opengdMenu} />
<div className="godocto_header_menu_option_div" onClick={this.openDesktopAboutusForm}>
<span><a className="gd_header_menu_option"> ABOUT US </a></span>
</div>
<div className="godocto_header_menu_option_div" onClick={this.openDesktopContactForm}>
<span><a className="gd_header_menu_option">CONTACT US</a></span>
</div>
</div>
</div>
<div className="gd_small_header_collapsed_container col-xs-12 col-sm-12 col-md-12 visible-xs visible-sm" id="gd_small_header_collapsed_container">
<div className="gd_small_header_collpased_menu_division">
<img className="gd_small_header_logo_icon2" src={require('./images/GD_Logo_gray.png')} alt="gd small logo" onClick={this.loadHomePage} />
<img className="gd_small_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="gd small menu mobile" onClick={this.opengdMenu} />
</div>
<div className="gd_small_header_menu_division">
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
<span><a className="gd_small_header_menu_option">ABOUT US</a></span>
</div>
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
<span><a className="gd_small_header_menu_option">CONTACT US</a></span>
</div>
</div>
</div>
</div>
);
}
}
}
export default Header
when i clicked on menu then it caught error or i click whether about or contact same error will come
in about us and contact component i render text simply but error was come in header component
there is only one state variable

The error you are having is on this part:
<div className="gd_small_header_menu_division">
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
<span><a className="gd_small_header_menu_option">ABOUT US</a></span>
</div>
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
<span><a className="gd_small_header_menu_option">CONTACT US</a></span>
</div>
</div>
take a look at this part onClick="openSmallDesktopAboutusForm()". You can write it like this onClick={openSmallDesktopAboutusForm()} just like what you did with your other methods.
As per the warning message, you can just change onclick on small caps, with onClick with the camel case.