Develop Reference

How do I add some HTML panels from my Modal to my web page the 'React way'

I have 2 Components, ApplicationOverview.js and ApplicationModal.jsx. Basically, I have a button "Add Application" on my ApplicationOverview.js page which opens the Modal in which I want to fill in some input fields and upload an image there, which is then shown on the ApplicationOverview page as a panel through predefined HTML.
The way I currently implemented it is with the .insertAdjacentHTML method which works, but on the one hand I've been told that implementing it this way makes my page vulnerable to XSS, and on the other hand, events that are added like this are not working. Is there a safe way to let React handle this by passing the HTML to ApplicationOverview.js and append it to an existing div element? Nothing I have searched for so far has worked for me.
ApplicationModal.jsx:
import React from "react";
import placeholder from "../icons/placeholder.png";
var name = "";
var comment = "";
var filename = "";
var id = 0;
const ApplicationModal = ({ setOpen }) => {
const [state, setState] = React.useState("");
const [stateComment, setStateComment] = React.useState(placeholder);
const [file, setFile] = React.useState({placeholder});
React.useEffect(() => {
function handleEscapeKey(event) {
if (event.code === "Escape") {
setOpen(false);
}
}
document.addEventListener("keydown", handleEscapeKey);
return () => document.removeEventListener("keydown", handleEscapeKey);
});
const handleComment = (e) => {
setStateComment(e.target.value);
};
const handleChange = (e) => {
setState(e.target.value);
};
//Method which adds new panels to ApplicationOverview.js
const addNewApplication = () => {
if (state !== "" && stateComment !== "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id=${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else if (state === "" && stateComment !== "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id = ${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else if (state !== "" && stateComment === "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id=${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else {
alert("Please fill in atleast one value.");
}
};
function openDialog() {
document.getElementById("inputUpload").click();
}
function loadFile(e) {
console.log(e.target.files);
setFile(URL.createObjectURL(e.target.files[0]));
}
document.addEventListener("click", function(e) {
})
name = state;
comment = stateComment;
filename = file;
return (
<React.Fragment>
<div className="modalDark" style={{ paddingRight: "250px" }}>
<div class="modal-dialog">
<div class="modal-content" style={{ width: "800px" }}>
<div class="modal-close">
<div class="module-button" style={{ left: "750px" }}>
<button
class="btn btn-link "
onClick={() => setOpen(false)}
></button>
<div class="button-animation"></div>
<div class="button-content new">
<i class="icon icon-dc_close"></i>
</div>
</div>
</div>
<div class="modal-header">
<h3>Add new Application</h3>
</div>
<div class="modal-body">
<div
class="module-input form-group has-placeholder"
data-plugin="moduleInput"
style={{ bottom: "60px", width: "350px" }}
>
<label for="demo-default">Customer Name</label>
<div class="input-animation-wrapper">
<input
type="text"
id="demo-default"
class="form-control "
value={state}
maxLength="42"
placeholder="[Application Name]"
onChange={(e) => handleChange(e)}
/>
<div class="input-animation"></div>
</div>
</div>
<div
class="module-textarea form-group floating-label has-placeholder"
data-plugin="moduleInput"
style={{ bottom: "60px" }}
>
<label for="demo-3">Customer Short text</label>
<div
class="input-animation-wrapper"
style={{ width: "350px" }}
>
<textarea
id="demo-3"
class="form-control"
rows="9"
placeholder="Short description of Customer; max. 280 characters"
maxLength={180}
value={stateComment}
onChange={(e) => handleComment(e)}
style={{ width: "350px" }}
></textarea>
<div class="label-area"></div>
<div class="input-animation"></div>
</div>
</div>
<img
class="image"
alt="Customer Logo"
id="logo"
src={file}
style={{
left: "420px",
bottom: "280px",
position: "absolute",
height: "250px",
}}
/>
<div
class="module-button"
style={{
left: "500px",
bottom: "200px",
position: "absolute",
zIndex: "1",
}}
>
<button
type="file"
class="btn btn-light"
onClick={() => openDialog()}
id="fileUpload"
>
<input
type="file"
hidden={true}
accept="image/*"
id="inputUpload"
onChange={(e) => loadFile(e)}
></input>
</button>
<div class="button-animation"> </div>
<div class="button-content">
<span class="content-text">Upload Logo</span>
</div>
</div>
<div
class="module-button"
style={{ bottom: "50px", width: "100px", textAlign: "center" }}
>
<button
type="button"
class="btn btn-secondary btn"
onClick={() => addNewApplication()}
id="adding"
></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Add</span>
</div>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
};
export default ApplicationModal;
export { name, comment, filename };
ApplicationOverview.js:
import React from "react";
import placeholder from "../icons/placeholder.png";
import ApplicationModal from "../components/ApplicationModal.jsx";
const ApplicationOverview = () => {
const [open, setOpen] = React.useState(false);
return (
<div id="wrapper">
{open && <ApplicationModal setOpen={setOpen} />}
<div class="component-headline">
<h4 style={{ color: "gray", display: "inline" }}>
Application overview
</h4>
<div
class="module-button"
style={{
backgroundColor: "rgb(18,205,212,255)",
borderRadius: "12px",
marginLeft: "1032px",
}}
onClick={() => setOpen(true)}
>
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div
class="button-content"
style={{
backgroundColor: "rgb(18,205,212,255)",
borderRadius: "12px",
}}
>
<span class="content-text" style={{ color: "black" }}>
Add Application
</span>
</div>
</div>
</div>
<hr style={{ marginTop: "-20px" }} />
<!-- This is where the added content should be appended to, below are three examples -->
<!-- of hardcoded panels that should be normally added through the Modal" -->
<div class="center-content" id="center">
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Press</h3>
<p class="overview-p">This Application is used for maintenance</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Tooling Machine</h3>
<p class="overview-p">
This Application is used for drilling records
</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Storing Unit</h3>
<p class="overview-p">
This Application is used to store parameters
</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ApplicationOverview;
Modal Window
ApplicationOverview

You can put your useState in the ApplicationOverview.js and pass them as props to the ApplicationModal. So when the applicationModal set the useState the ApplicationOverview has the data and can simply display it.
in your ApplicationOverview:
const [state, setState] = React.useState("");
const [stateComment, setStateComment] = React.useState(placeholder);
const [file, setFile] = React.useState({placeholder});
return (
<div id="wrapper">
{open && <ApplicationModal setOpen={setOpen} setState={setState} state={state} setFile={setFile} file={file} setStateComment={setStateComment} stateComment={stateComment}/>
rest of your HTML
)
then where you want to display the result in the ApplicationOverview you can:
{state && stateComment { display what you want}}

The carousel is not working and getting $('carouselId').carousel is not a function error

I am creating a nextJS app and I am creating a carousel component and trying to use it in index.js
Below is the code of my component and I am using the code that's used at https://www.codeply.com/go/EIOtI7nkP8/bootstrap-carousel-with-multiple-cards.
import React, { useState, useEffect } from 'react';
import $ from 'jquery';
import { Container, Row, Card, Pagination } from 'react-bootstrap';
import Carousel from 'react-bootstrap/Carousel';
import styles from './NewsAndEvents.module.css';
const NewsAndEventsComponent = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
useEffect(() => {
console.log('Fired', $('#recipeCarousel'));
$('#recipeCarousel').carousel({
interval: 5000,
});
$('#recipeCarousel.carousel .carousel-item').each(function () {
var minPerSlide = 3;
var next = $(this).next();
console.log(next);
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
return (
<div className={styles.mainDiv}>
<Container>
<Row className={styles.newEventsHeaderContainer}>
<p className={styles.mainText}>News and Events</p>
<Pagination className={styles.mainText}>
<Pagination.Prev className={styles.paginationButton} />
<Pagination.Next className={styles.paginationButton} />
</Pagination>
</Row>
<div className="container text-center my-3">
<div className="row mx-auto my-auto">
<div
id="recipeCarousel"
className="carousel slide w-100"
data-ride="carousel"
>
<div className="carousel-inner w-100" role="listbox">
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=1"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=2"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=3"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=4"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=5"
/>
</div>
</div>
</div>
<div className="carousel-item active">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=6"
/>
</div>
</div>
</div>
</div>
<a
className="carousel-control-prev w-auto"
href="#recipeCarousel"
role="button"
data-slide="prev"
>
<span
className="carousel-control-prev-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"
></span>
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next w-auto"
href="#recipeCarousel"
role="button"
data-slide="next"
>
<span
className="carousel-control-next-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"
></span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
</div>
</Container>
</div>
);
};
export default NewsAndEventsComponent;
I am getting the below error while trying to execute the $('#recipeCarousel').carousel({interval: 5000,}); inside useEffect.
Does anyone have any idea what i might be missing or maybe doing incorrectly? Please advise
Ps- Have imported below line in the _app.js file as well.
import 'bootstrap/dist/css/bootstrap.min.css';

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>;}}

Passing my form component to another component | Reactjs

Hi i have a form component where my form data is, I'm trying to pass it into another component called "airtime-data-mtn.js" to make up part of a whole page. i.e the form is just a part of the whole page, the airtime-data component already has information rendered, page information. Note: I had done something similar where i passed a form into another component but there in the render method I was not rendering other information about the page just the form alone
since it is a form i simply tried passing it like <mtnform onSubmit={this.handleSubmit}/> but I noticed instead of it to be blue to show it is a form it's doesn't change color. I believe it is seeing it as JSX and not a form. When I add a route and use the form as the component it renders the form as expected but when i try to pass it into the airtime component, it does not work as expected
render() {
return (
<form
name="airtime-form"
className="airtime-form"
onSubmit={this.handleSubmit}
>
<div style={{ margin: "20px 0" }}>
<select
ref="constantVal"
className="select"
onChange={this.handleDropDownChange}
>
{this.state.obj.map(item => {
return (
<option key={item.Id} value={item.Name}>
{item.Name}
</option>
);
})}
</select>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="number"
value={this.state.Price}
onChange={this.handlePriceChange}
placeholder="Amount"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.ParameterRegEx}
onChange={this.handleNumberChange}
placeholder="Phone Number"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.Email}
onChange={this.handleEmailChange}
/>
</div>
<div style={{ margin: "20px 0", fontSize: "20px" }}>
*Email is required for notification purposes
</div>
<div>
<button type="submit" className="btn btn-submit">
Submit
</button>
</div>
</form>
);
}
render() {
const { isLoaded } = this.state;
if (!isLoaded) {
return (
<div className="center">
<img src={Spinner} alt="loading spinner" />
</div>
);
} else {
return (
<body
style={{
backgroundImage: "url(" + background + ")",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}}
>
<section>
<div className="row">
<div
className="col span-2-of-3"
style={{ backgroundColor: "#3C444C" }}
>
<div className="row">
<h2>
<img
src={mtn}
alt="mtn logo"
style={{ display: "inline-block" }}
/>
Airtime & Data
</h2>
</div>
<div className="row">
<mtnform></mtnform>
</div>
</div>
<div className="col span-1-of-3">
<div className="rhs-content">
<div className="row">
<h2 className="text-transform">use payarena today</h2>
</div>
<div className="row">
<h3 className="select-headings">Airtime & Data</h3>
<form onSubmit={this.onUrlSelected.bind(this)}>
<select ref="items" className="select">
{this.state.airtime.map(item => {
return (
<option key={item.id} value={item.Url}>
{item.Name}
</option>
);
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Bills Payment</h3>
<form onSubmit={this.onSecondUrlSelected.bind(this)}>
<select ref="items1" className="select">
{this.state.bills.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Collections & Levies</h3>
<form onSubmit={this.onThirdUrlSelected}>
<select ref="items2" className="select">
{this.state.collectionsAndLevies.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">The Lotteries</h3>
<form onSubmit={this.onFourthUrlSelected}>
<select ref="items3" className="select">
{this.state.lottery.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<p>Pay using any of the following</p>
<img src={logomask} alt="logo mask" className="logo-mask" />
</div>
</div>
{/*eslint-disable-next-line react/jsx-no-duplicate-props*/}
<section className="row" className="next-rhs">
<p>Download the Payarena app</p>
<ul className="main-nav">
<li>
<img src={googlestore} alt="google play store" />
</li>
<li>
<img src={appstore} alt="app store" />
</li>
</ul>
</section>
</div>
</div>
</section>
<footer className="footer">
<div className="row">
<div className="col span-1-of-3">
<img
src={palogo}
alt="pa-logo"
style={{
display: "block",
marginLeft: "30px;"
}}
/>
<p>An innovation from Unified Payments Limited</p>
</div>
<div className="col span-2-of-3">
<div className="row">
<div className="col span-1-of-3">
<h2>Page Links</h2>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
About Us
</a>
</p>
<p>
{" "}
<a
href="/services"
style={{ textDecoration: "none", color: "white" }}
>
Our Services
</a>
</p>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
The Team
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Support Links</h2>
<p>
<a
href="/contact"
style={{ textDecoration: "none", color: "white" }}
>
Contact Us
</a>
</p>
<p>
<a
href="/faqs"
style={{ textDecoration: "none", color: "white" }}
>
FAQs
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Social Links</h2>
<p>
{" "}
<a
href="https:/www.twitter.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-twitter"
style={{ color: "white", margin: "0 10px" }}
/>
Twitter
</a>
</p>
<p>
{" "}
<a
href="https://www.facebook.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-facebook"
style={{ color: "white", margin: "0 10px" }}
/>
Facebook
</a>
</p>
<p>
{" "}
<a
href="https://www.linkedin.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-linkedin"
style={{ color: "white", margin: "0 10px" }}
/>
Linkedin
</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<footer
className="footer"
style={{ backgroundColor: "white", color: "black" }}
>
<div className="row">
<p style={{ float: "left" }}>
Copyright © Unified Payments 2019.
</p>
</div>
</footer>
</body>
);
}
}
Please any help would be fantastic. I'm stuck and trumped

Navigating from page to another using React

I have website built on Angular.JS, Node.JS and Mongo. Currently I am trying to make the front-end from Angular.JS into React.JS.
This is the link to the website "Otbo5ly" (It is an Arabic word that means "cook for me")
I want to navigate from a page to another when clicking on a button, here is my code:
app.jsx file
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div style = {{backgroundImage: 'url(/assets/header-bg.jpg)',
backgroundPosition: 'bottom',
paddingTop: '10px'}}>
<div>
<div className="container-fluid">
<nav className="navbar navbar-inverse" style = {{ margin: '25px 50px',
backgroundColor: 'rgba(31, 31, 31, 0.7)',
borderColor: '#484848',
zIndex: '3',
position: 'absolute'
}}>
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span clNameass="icon-bar"></span>
</button>
<a className="navbar-brand" href="#/" style = {{color: "#257204"}}>Otbo5ly
<small> beta</small></a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li>My Profile</li>
<li>My Orders</li>
<li> Sign In</li>
<li>Sign Up</li>
<li>Sign out</li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li>RBK</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
</div>
</div>
<MainPage></MainPage>
<Router history={hashHistory}>
<Route path='/signup' component={SignUp}>signup</Route>
<Route path='signin' component={SignIn}>signin</Route>
</Router>
</div>
)}
}
window.App = App;
I want to take the user to the sign in page or the profile page when clicking on the profile-button, here is the profile.jsx file:
var Profile = (props) => (
<div className="row" style={{
background: "url('assets/inside-bg.jpg')",
backgroundPosition: 'top',
minHeight: '500px',
zIndex: '2',
paddingTop: '100px'}}>
<div className="row" style={{paddingBottom: '50px', margin: '0px'}}>
<div className="col-md-10 col-md-offset-1 text-center">
<div className="col-md-4 col-xs-12" style={{ color: '#fff', marginTop: '20px'}}>
<img src="/assets/chef.png" className="img-responsive thumbnail" style={{margin: 'auto'}} />
<img src="/ImgUrl" className="img-responsive thumbnail" style={{margin: 'auto'}}/>
</div>
<div className="col-md-8 col-xs-12" style={{color: '#fff', marginTop: '20px'}}>
<h1 style={{fontWeight: 'bold', color: '#fff', textAlign: 'left', marginBottom: '40px'}}>
data FullName </h1>
<div className="col-md-6 col-xs-12">
<i className="glyphicon glyphicon-phone" style="font-size: 3em;"></i>
<p style="line-height: 40px;font-size: 15pt;">
data PhoneNumber
</p>
</div>
<div className="col-md-6 col-xs-12">
<i className="glyphicon glyphicon-envelope" style={{fontSize: '3em'}}></i>
<p style={{lineHeight: '40px', fontSize: '15pt'}}> data Email </p>
</div>
</div>
<div className="col-xs-12" style={{marginTop: '50px'}}>
<span style={{padding: '20px', fontSize: '1.7em', color: '#fff'}}><b> data FullName </b> cooking for today is : <b> data todayCook Name </b>, just for
<b> data todayCook Price </b> JOD!</span>
<button className="btn btn-lg btn-primary">Order now</button>
</div>
</div>
</div>
</div>
<div className="row" style= {{marginTop: '40px'}}>
<div className="col-md-10 col-md-offset-1 col-xs-12">
<div className="panel panel-default">
<div className="panel-heading"><b> data user FullName </b> schedule</div>
<table className="table">
<tbody>
<tr style={{fontWeight: 'bold'}}>
<td>Day</td>
<td> cook DayName </td>
</tr>
<tr>
<td style={{fontWeight: 'bold'}}>Cooking</td>
<td> cook CookeName </td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div className="row">
<div className="page-header text-center">
<h1>User reviews <small> for data FullName </small></h1>
</div>
</div>
<div className="row">
<div className="col-md-10 col-md-offset-1 col-xs-12">
<div className="col-md-6 col-xs-12">
<div className="panel panel-default">
<div className="panel-body"> comment ComBody </div>
<div className="panel-footer"> comment InsertedUserFullName </div>
</div>
</div>
</div>
</div>
)
window.Profile = Profile;
I have tried many ways but I think I am missing something, maybe a library or the syntax, still not sure of the best way to navigate.

Assuming you are using the latest version of React Router (4v). Try something like this.
import React,{Component} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class App extends Component{
render(){
return(
<Link to="/signin"><input value="profile"/></Link>
);
}
}
export default App;