We Keep Coding

Error message when trying to link external JS file to react Component

When I try to link my main.js folder into my react component, I get this error message
"TypeError: Cannot read property 'addEventListener' of null"
I want implement the JS to the modals into my work section, I am having trouble doing that. I am very new to React so I am not totally sure what the rules and best practices are. I am tryint turn my old portfolio site into a new SPA site.
Code:
// 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';
}
});
React Code:
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 modals from '../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 className="work-title">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>
<script src={modals}>
</script>
</>
)
}
}
export default Work

How can I correctly add Items to a cart in Reactjs?

I would like to move some items from a modal to a page I have kept for orders. It's kind of similar to a cart. I am able to get the items to display in the console but when I add them and go check the orders page I cant see the items I just added.
This is the JSX code for the modal
class pizzaModal extends Component {
state = {
selected: "small",
showModal: true,
showOrders: false,
orders: []
}
toggleHandler = (size)=> ()=>{
this.setState({
toggle: size
});
}
addToOrders = (productName, productIngredients, productPrice, productImage)=>{
this.setState(prevState=>({
orders: [...prevState.orders, productImage, productName, productIngredients, productPrice]
}))
}
render (){
let attachedClasses = [styles.ImageContainer]
if(this.state.toggle==='small'){
attachedClasses = [styles.ImageContainer, styles.Small]
}
if(this.state.toggle==="medium"){
attachedClasses = [styles.ImageContainer, styles.Medium]
}
if(this.state.toggle==="large"){
attachedClasses=[styles.ImageContainer, styles.Large]
}
return (
<Aux>
{ this.state.showOrders?
<Orders
pizzaName={this.state.orders[2]}
pizzaImage={this.state.orders[1]}
pizzaIngredients={this.state.orders[3]}
pizzaPrice={this.state.orders[0]}/>:
null}
<div className={styles.Pizzamodal}>
<div className={styles.ModalContainer}>
<div className={attachedClasses.join(' ')}>
<img src={this.props.image} alt="pizzapicture"/>
</div>
<div className={styles.DetailsContainer}>
<div>
<div className={styles.TextDetails}>
<h1>{this.props.name}</h1>
<p>{this.props.ingredients}</p>
</div>
<div>
<div className={styles.Form}>
<form className={styles.switchButton}>
<input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler("small")}
checked={this.state.toggle==="small"}/>
<label for="small">Small</label>
<input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler("medium")}
checked={this.state.toggle==="medium"}/>
<label for="medium">Medium</label>
<input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler("large")}
checked={this.state.toggle==="large"}/>
<label for="large">Large</label>
</form>
</div>
<div className={styles.orderButton}>
<button onClick={(productImage, productName,productIngredients, productPrice)=>this.addToOrders(
productImage=this.props.image,
productName=this.props.name,
productIngredients=this.props.ingredients,
productPrice=this.props.price )}>Add to basket for ₦{this.props.price}</button>
</div>
</div>
</div>
</div>
<div className={styles.Navbar} onClick={this.props.clicked}>
<div></div>
<div></div>
</div>
</div>
</div>
</Aux>
)
}
}
JSX code for the Orders Page
const orders = (props)=>{
return(
<div>
<div className={Styles.OrderHeader}>
<div>
<img src={Logo} alt="logo"/>
<h1>DODO PIZZA</h1>
</div>
</div>
<h1 className={Styles.OrderContentContainerHeader}>My order</h1>
<div className={Styles.OrderContentContainer}>
<div className={Styles.OrderContent}>
<div>
<div style={{paddingRight: '80px'}}>
<img src={props.pizzaImage} alt="pizza"/>
</div>
<div>
<h1>{props.pizzaName}</h1>
<p>{props.pizzaIngredients}</p>
</div>
</div>
<div className={Styles.OrderContentPrice}>
<div><span>1</span></div>
<div><span>₦{props.pizzaPrice}</span></div>
</div>
</div>
<div className={Styles.OrderContent}>
<div>
<div style={{paddingRight: '80px'}}>
<img src={Sides} alt="sides"/>
</div>
<div>
<h1>Sausage Roll</h1>
<p style={{textOverflow: 'ellipsis',
whiteSpace: 'nowrap'}}>1 pcs</p>
</div>
</div>
<div className={Styles.OrderContentPrice}>
<div><span>1</span></div>
<div><span>₦2,700</span></div>
</div>
</div>
<div className={Styles.OrderContent}>
<div>
<div style={{paddingRight: '80px'}}>
<img src={Desserts} alt="desserts"/>
</div>
<div>
<h1>Ice Cream Straciatella</h1>
<p style={{textOverflow: 'ellipsis',
whiteSpace: 'nowrap'}}>1 pcs</p>
</div>
</div>
<div className={Styles.OrderContentPrice}>
<div><span>1</span></div>
<div><span>₦2,700</span></div>
</div>
</div>
<div className={Styles.OrderContent}>
<div>
<div style={{paddingRight: '80px'}}>
<img src={Drinks} alt="drinks"/>
</div>
<div>
<h1>Fanta</h1>
<p style={{textOverflow: 'ellipsis',
whiteSpace: 'nowrap'}}>
1 pcs</p>
</div>
</div>
<div className={Styles.OrderContentPrice}>
<div><span>1</span></div>
<div><span>₦2,700</span></div>
</div>
</div>
</div>
<div className={Styles.OrderPlacement}>
<h1>Dipping Sauces</h1>
<h1>Total: ₦4500</h1>
<div className={Styles.ButtonContainer}>
<button>Back to menu</button>
<button>Next</button>
</div>
</div>
For the Orders page, I would like to display the pizza information dynamically based on what I get from the modal but I can't see it. I can see the information "this.state.orders[0] to [3]" in the modal but nothing gets added to the orders page.

ReactJs how to get specific props data in child component

I get API data in DownloadsHistory.jsx and passed props in the child components like below code:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
If I console in DownloadData.jsx get below data:
{downloadToday: "55628", downloadYesterday: "98569", downloadLastWeek: "720570", downloadAllTime: "143086901"}
I get all the props data if I called <DownloadHistory/>. that's fine but how can I get single data from it? Suppose I want only {this.props.downloadToday}. on a third.jsx
Add more details code below:
DownloadHistory.jsx
import React, { Component } from "react";
import axios from "./axios";
import DownloadData from "./download-view";
class DownloadsHistory extends Component {
state = {
data: [],
};
componentDidMount() {
var slug = "contact-form";
const url =
"https://api.xyz.com/downloads.php?slug=" +
slug +
"&limit=10&historical_summary=1";
axios.get(url).then((res) => {
this.setState({ data: res.data });
});
}
constructor(props) {
super(props);
this.state = {};
}
render() {
var d = this.state.data;
if (!d) return <div className="loading"></div>;
return (
<div>
<DownloadData
downloadToday={d.today}
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
</div>
);
}
}
export default DownloadsHistory;
download-view.jsx
import React, { Component, Fragment } from "react";
class DownloadData extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<table className="table" style={{ fontSize: 13, textAlign: "left" }}>
<tbody>
<tr>
<td>Today</td>
<td>{this.props.downloadToday}</td>
</tr>
<tr>
<td>Yesterday</td>
<td>{this.props.downloadYesterday}</td>
</tr>
<tr>
<td>Last Week</td>
<td>{this.props.downloadLastWeek}</td>
</tr>
<tr>
<th>All Time</th>
<th>{this.props.downloadAllTime}</th>
</tr>
</tbody>
</table>
</Fragment>
);
}
}
export default DownloadData;
widget.jsx
import React, { Fragment, Component } from "react";
import { faStar, faCheck } from "#fortawesome/free-solid-svg-icons";
import DownloadsHistory from "./DownloadsHistory";
import ActiveVersion from "./active-version";
import Downloads from "./download";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
class Widget extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<div className="row mt-5">
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download Today</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
<DownloadsHistory /> {/* Need only Today Data here*/}
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory /> {/* okay here */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Active Install</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
{this.props.active_installs}+
<div style={{ fontSize: 13 }}>
but less than {this.props.probable_active_install}
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Average Ratings</div>
</div>
<div className="widget-body clearfix">
<div className="pull-left">
<FontAwesomeIcon icon={faStar} color="#28a745" />
</div>
<div className="pull-right number">{this.props.AvgRating}</div>
<div style={{ fontSize: 13 }}>
based on {this.props.number_of_rating} reviews
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory />
</div>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className=" text-center">
<div className="clearfix">
<div className="pull-left">Active version</div>
</div>
<div className="clearfix pt-0">
<ActiveVersion />
</div>
</div>
</div>
</div>
</Fragment>
);
}
}
export default Widget;
** widget.jsx has some props from another parent.

Form your description I'm assuming that the DownloadData component is being rendered inside the DownloadHistory component. If it's the case, then you can simply place the Third component along with the DownloadData component and pass the downloadToday={d.today} only into the Third component.
Like this:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
<Third downloadToday={d.today} />
Hope this will help.

You need to call the web service from the parent of both and pass the props to components.

How to repeat two elements in a react component

I am using semantic ui and I need to build an accordion component. So this is what I come up with, but this doesn't work as the usage of .title and .content is wrong.
How should this be done correct?
import React, { Component } from 'react';
export default class Example extends Component {
getData() {
// some data
}
render() {
return (
<div className="ui styled fluid accordion">
{
this.getData().map((element) => {
return (
<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>
<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>
);
})
}
</div>
);
}
}
Update
The result should be like
<div class="ui accordion">
<div class="active title">
</div>
<div class="active content">
</div>
<div class="title">
</div>
<div class="content">
</div>
</div>

You can return only one component from a function.
In your case the map is a wrong choice. Try this in your render function:
// build the array of all elements
const accordionChildren = [];
this.getData().forEach(element => {
accordionChildren.push(
<div className="title">{element.title}</div>,
<div className="content">{element.content}</div>
);
});
return (
<div className="ui styled fluid accordion">
{accordionChildren}
</div>
);

It's invalid syntax to return two components in any part of the code. The issue is this snippet:
...
return (
<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>
<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>
);
...
However, you should be able to get them to render next to each other by returning an array:
...
return (
[(<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>),
(<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>)]
);
...

Rendering with reactjs

I am creating a sample app using reactjs. I am very new in reactjs. I set up all the things for reactjs like
1) Babel
2)Webpack
Using webpack I am genrating a file code.js which is included in the index file where all the code runs.
I am creating my first page but i got error like:
ERROR in ./components/Login/Login.js
Module build failed: SyntaxError: C:/xampp/htdocs/reactApp/components/Login/Logi
n.js: Expected corresponding JSX closing tag for <img> (18:33)
I dont know why the html rendering gives me error.
My code is like:
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div class="page-content container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="box">
<div class="content-wrap">
<h6>Sign In</h6>
<div class="social">
<a class="face_login" href="#">
<span class="face_icon">
<img src="images/facebook.png" alt="fb">
</span>
<span class="text">Sign in with Facebook</span>
</a>
<div class="division">
<hr class="left">
<span>or</span>
<hr class="right">
</div>
</div>
<input class="form-control" type="text" placeholder="E-mail address">
<input class="form-control" type="password" placeholder="Password">
<div class="action">
<a class="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div class="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}
Please help me to solve this problem

There is at least one more problem: You used class= instead of className= everywhere. Obviously you did try to copy & paste html code. There is a great online converter which i use. It allows you to do that without errors: http://magic.reactjs.net/htmltojsx.htm
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div className="page-content container">
<div className="row">
<div className="col-md-4 col-md-offset-4">
<div className="login-wrapper">
<div className="box">
<div className="content-wrap">
<h6>Sign In</h6>
<div className="social">
<a className="face_login" href="#">
<span className="face_icon">
<img src="images/facebook.png" alt="fb" />
</span>
<span className="text">Sign in with Facebook</span>
</a>
<div className="division">
<hr className="left" />
<span>or</span>
<hr className="right" />
</div>
</div>
<input className="form-control" type="text" placeholder="E-mail address" />
<input className="form-control" type="password" placeholder="Password" />
<div className="action">
<a className="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div className="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}
Hope you found this useful.

The error clearly mentions what needs to be done. In JSX you need to close the singleton tags like <br> , <img> and <input>
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div class="page-content container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="box">
<div class="content-wrap">
<h6>Sign In</h6>
<div class="social">
<a class="face_login" href="#">
<span class="face_icon">
<img src="images/facebook.png" alt="fb" />
</span>
<span class="text">Sign in with Facebook</span>
</a>
<div class="division">
<hr class="left">
<span>or</span>
<hr class="right">
</div>
</div>
<input class="form-control" type="text" placeholder="E-mail address" />
<input class="form-control" type="password" placeholder="Password" />
<div class="action">
<a class="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div class="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}