Develop Reference

Reactjs: Error: HomePage(...): Nothing was returned from render

I learn REACTJS, and I find one problem, I don't know how I can fix them
Error: HomePage: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Code Component:
import React from "react";
const HomePage = () =>{
<div className="homepage">
<div className="directory-menu">
<div className="menu-item">
<div className="content">
<h1 className="title">HATS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">JACKETS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">SNEAKERS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">WOMENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">MENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</div>
</div>
};
export default HomePage;
Code App:
import React from 'react';
import './App.css';
import HomePage from './homepage.component';
function App() {
return (
<div>
<HomePage/>
</div>
);
}
export default App;

So add return to the home component:)
import React from "react";
const HomePage = () =>{
return (
<div className="homepage">
<div className="directory-menu">
<div className="menu-item">
<div className="content">
<h1 className="title">HATS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">JACKETS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">SNEAKERS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">WOMENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">MENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</div>
</div>
)
};
export default HomePage;

react-scroll won't scroll to specific element with explicit id

I have a file called Terms.js that has 2 checkboxes at the end of some scrollable text inside a container. I'm trying to use react-scroll to smooth scroll to one of those checkboxes using this video guide. When I use:
<a className="checkbox-scroll-link" href="#checkbox-scroll-tag">
{termsandconditions.mobileScrollPromptText}
</a>
It will correctly jump to the checkbox. But when I use <Link> like in {/* -------------- Bottom Section -------------- */} of my code below, it doesn't find/scroll to the checkbox.
This is how I'm importing it in Terms.js:
import { Link } from 'react-scroll';
Here is how I'm rendering the component inside Terms.js:
render() {
const bgStyle = {
backgroundImage: `url(${loginCampus})`,
};
const mainContent = (
<div id="terms-page">
<div className="background-container" style={bgStyle}>
<div className="overlay-container">
<div className="terms-container">
{/* -------------- Top Section -------------- */}
<div className="columns top-section-container is-multiline is-mobile">
<div className="column top-left">
<div className="back-container">
<img
src={arrow}
className="back-button"
onClick={this.routeBack}
onKeyDown={this.routeBack}
alt="back"
role="presentation"
/>
<p
className="back-text"
onClick={this.routeBack}
onKeyDown={this.routeBack}
role="presentation"
>
Back
</p>
</div>
</div>
<div className="column is-half header-text-container has-text-centered">
<h1>{termsandconditions.header1}</h1>
<h2>{termsandconditions.header2}</h2>
</div>
<div className="column"></div>
</div>
<div className="yellow-horizontal-line"></div>
<div className="footer-horizontal-line-container">
<div className="grey-horizontal-line"></div>
</div>
{/* -------------- Middle Section -------------- */}
<div className="text-box">
<div className="columns is-multiline is-centered">
<div className="column is-full">
<p>{termsandconditions.termstext}</p>
</div>
<div className="column is-narrow">
<label className="checkbox">
<input type="checkbox" onChange={this.handleTermsCheck} />
<span className="checkbox-text" id="checkbox-scroll-tag">
{termsandconditions.checkbox1}
</span>
</label>
</div>
<div className="column is-narrow"></div>
<div className="column is-narrow">
<label className="checkbox">
<input type="checkbox" onChange={this.handleAgeCheck} />
<span className="checkbox-text">
{termsandconditions.checkbox2}
</span>
</label>
</div>
<div className="column"></div>
</div>
</div>
{/* -------------- Bottom Section -------------- */}
<div className="footer">
<div className="mobile-scroll-prompt">
<Link
className="checkbox-scroll-link"
to="checkbox-scroll-tag"
smooth={true}
duration={1000}
>
{termsandconditions.mobileScrollPromptText}
</Link>
</div>
<div className="footer-horizontal-line-container">
<div className="grey-horizontal-line"></div>
</div>
<button
className="button agree-button"
disabled={!this.state.allTermsAgreed}
onClick={this.goToGameExamplePage}
>
Agree
</button>
</div>
</div>
</div>
</div>
</div>
);
return <section className="section auth">{mainContent}</section>;}}

How to import the component in another component which include image in react js

I am working on some assignment of reactjs. There are many components are included .
I want to import one component into another components which include different images with it . How can I do it.
Here is the(portfolio items) component which export and include image source
PortItems.js
import React from "react";
const PortItems = () => {
return(
<div>
{/* Portfolio Item 1*/}
<div className="col-md-6 col-lg-4 mb-5">
<div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
</div>
</div>
<img className="img-fluid" src="" alt="this is cabin image" />
</div>
</div>
</div>
)
}
export default PortItems;
Here is the code for main component which import PortItems
import React ,{Component} from "react";
import "../App.css";
import PortItems from "./PortItems";
import Cabin from "./images/cabin.png";
import Cake from "./images/cake.png";
import Circus from "./images/circus.png";
import Game from "./images/game.png";
import Safe from "./images/safe.png";
import Submarine from "./images/submarine.png";
const Portfollio = () =>{
return(
<div>
{/* Portfolio Section*/}
<section className="page-section portfolio" id="portfolio">
<div className="container">
{/* Portfolio Section Heading*/}
<h2 className="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
{/* Icon Divider*/}
<div className="divider-custom">
<div className="divider-custom-line"></div>
<div className="divider-custom-icon"><i className="fas fa-star"></i></div>
<div className="divider-custom-line"></div>
</div>
{/* Portfolio Grid Items*/}
<div className="row">
* <PortItems
src={Cabin}
/>
*

Try adding props to the PortItem component and use it in its <img />tag:
const PortItems = (props) => {
return(
<div>
{/* Portfolio Item 1*/}
<div className="col-md-6 col-lg-4 mb-5">
<div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
</div>
</div>
<img className="img-fluid" src={ props.src } alt="this is cabin image" />
</div>
</div>
</div>
)
}

Refactoring jQuery for react component

I am moving away from using jQuery to do some quick hides, shows and css changes because I am using components in react that need to be re-rendered and thus are not triggering the jQuery actions that need a page refresh. I think my issue is that I need to set the state in each component but I am a bit confused as to how. Here is an example of the jquery for this particular view:
<script type="text/javascript">
$(document).ready(function () {
$(".schedule-times").hide();
$(".final-check").hide();
$(".available-time").on('click', function () {
$(".schedule-times").toggle();
});
$(".schedule-button").on('click', function () {
$('.finalize-timeline').css("background", "#4CAF50");
$(".final-check").show();
});
});
</script>
Here is an example of a component I have written:
import React, { Component } from 'react';
import '../../App.css';
import Calendar from '../Calendar';
import { Link } from 'react-router';
class Schedule_3 extends Component {
render() {
return (
<div className="wow fadeIn">
<div className="container">
<div className="timeline">
<div className="col-md-12 offset-md-2">
<div className="row">
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
<i className="fa fa-check wow bounceInDown"></i>
</div>
<span>How do you want to schedule?</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
<i className="fa fa-check wow bounceInDown"></i>
</div>
<span>Pick your lesson type</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
</div>
<span>Find a time</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge" id="no_border">
</div>
<span>Finalize</span>
</div>
</div>
</div>
</div>
<div className="row">
<div className="container">
<div className="col-md-6 offset-md-3">
<Calendar />
</div>
</div>
</div><br />
<div className="row schedule-times">
<div className="col-md-12 offset-md-2">
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
10:30AM
</div>
<div className="col-md-2 offset-md-1">
<Link to="Schedule_4">
<button className="btn btn-primary">
Book Now
</button>
</Link>
</div>
</div><br />
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
11:00AM
</div>
<div className="col-md-2 offset-md-1">
<button className="btn btn-primary">
Book Now
</button>
</div>
</div><br />
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
11:30AM
</div>
<div className="col-md-2 offset-md-1">
<button className="btn btn-primary">
Book Now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Schedule_3;

Looking at your code I would suggest the first thing you need to do is split it into smaller, more manageable and more readable components that are responsible for 1 thing.
As you have posted a big example I cannot show you how to do it for every case you have, but I can give you a simple example that can be adapted for your use cases.
class ToggleContent extends React.Component {
constructor() {
super();
this.state = { hidden: true };
this.toggleContent = this.toggleContent.bind(this);
}
toggleContent() {
this.setState(prevState => ({
hidden: !prevState.hidden
}));
}
render() {
const { hidden } = this.state;
const { children } = this.props;
return (
<div>
<button onClick={ this.toggleContent }>Toggle</button>
<div>
{ !hidden && children }
</div>
</div>
);
}
}
You can use this component like this <ToggleContent>Hello World</ToggleContent> and it will toggle visibility of Hello World on the button press. You can put anything inside of this, including other components, it doesn't have to just be text.
You can see an example of it running here.
You can see the state of whether the children are hidden or not is held in the component this.state = { hidden: true };.
The children are then rendered if it is not hidden, if !hidden === true. We can see that inline here { !hidden && children }.
The toggleContent method is then using the previous state to switch back and forth between hidden and showing.
toggleContent() {
this.setState(prevState => ({
hidden: !prevState.hidden
}));
}

How can I get a dynamic value of href and id's of the card in React JS

This is my first question in stackoverflow, I am still learning how to code and it might be a newbie question.
But, is it possible to have a dynamic href and id values when I want to map my data with axios to become cards? Because if I run my code, the card that will work (one that can collapse) is just the first one, the others did not work. This is my code (sorry the code isnt the same with the real file in my vscode cos my real file was becoming a chaos.)
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href="#colla">
{item.model} - {item.tahun}
</a>
</div>
<div id="colla" className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

You can use unique ID for every href using index value in the map and also map the index in accordion div. See the below code for sample
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
{item.model} - {item.tahun}
</a>
</div>
<div id={"colla"+ index} className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>