how do i reuse a react component but with different colours?

how do i reuse a react component but with different colours? - javascript

Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;

One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.

Related

cannot export react class

Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)

Use in Product.jsx the import React from "react";
demo in stackblitz

First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";

React switching between components or hiding and transitions

I am trying to set up the general page rendering of an app and need help/advice as a newbie. The code below allows me to include components base on a state I can change by clicking on a button. I am not sure if this is the best way to do this but when I click on my buttons they include the components needed.
Now when I click on them the other pages just disappear and show up without any transition. How would I fade out a little slower or transition better to the next component?
My app.js
import React, { useState } from "react";
//Adding Components
import Home from "./Components/Home";
import Game from "./Components/Game";
import Myp from "./Components/Myp";
import Tutorial from "./Components/Tutorial";
//Import Styles
import "./styles/app.scss";
function App() {
const [pageStatus, setPageStatus] = useState(0);
return (
<div className="App">
<section>
{(() => {
switch (pageStatus) {
case 1:
return (
<Game pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
case 2:
return (
<Tutorial
pageStatus={pageStatus}
setPageStatus={setPageStatus}
/>
);
case 3:
return (
<Myp pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
default:
return (
<Home pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
}
})()}
</section>
</div>
);
}
export default App;
My Home.js
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</div>
);
};
export default Home;

You could try AOS library.
You just wrap the component in whatever and add what fade effect you want!
Here's how it looks: https://michalsnik.github.io/aos/
Github: https://github.com/michalsnik/aos

Recently I found this library which is live and works very well https://github.com/dennismorello/react-awesome-reveal
Also I made little sample for you hope it will work for you.
It's custom (No library).
Link for DEMO is here https://codesandbox.io/s/bold-gould-rjczp
Lets say you have this animation from 0 opacity to 100.
When you render component this class automatically will renew itself and animation will start from the beginning.
.fade-in {
animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
App.js
import React, { Component } from "react";
import "./styles.css";
import { Link, Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Secondary from "./secondary";
class app extends Component {
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Link to="/">Main</Link> | <Link to="/secondary">Secondary</Link>
<br />
<br />
<br />
<br />
<Switch>
<Route path="/" exact>
<div className="fade-in">
<div>Main</div>
</div>
</Route>
<Route path="/secondary">
<Secondary />
</Route>
</Switch>
</Router>
</div>
);
}
}
export default app;
Secondary.js
import React from "react";
export default function Secondary() {
return <div className="fade-in">Secondary</div>;
}
This is may be already dead library but if you want you can use react-reveal for transition effects. It's very easy to use, just wrap your content inside <Fade></Fade> tags
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
import Fade from 'react-reveal/Fade';
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<Fade> //here goes react-reveal/fade
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</Fade>
</div>
);
};
export default Home;
Link here https://www.react-reveal.com/examples/common/Fade

React: Fade slideshow not working. How to fix it?

I am getting an error while trying to implement the Fade slideshow. The required image is:
The required codes are:
Home.js
import React, {Component} from 'react';
import Header from '../Header/Header';
import Slideshow from '../Slideshow/Slideshow';
class Home extends Component{
render(){
return(
<div>
<Header/>
<Slideshow/>
</div>
)
}
};
export default Home;
Slideshow.js
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade
images={images}
duration="5000"
transitionDuration="1000"/>
)
}
export default Slideshow;
Please tell me how to fix it.

You can pass your images as children to Fade component not props:
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade>
// first child
<div className="each-fade">
<div className="image-container">
<img src={images[0]} />
</div>
<h2>First Slide</h2>
</div>
// second child
<div className="each-fade">
<div className="image-container">
<img src={images[1]} />
</div>
<h2>Second Slide</h2>
</div>
</Fade>
)
}
export default Slideshow;

custom modal does not appear react.js

I'm trying to call this Modal, but does not appear. I tried to put the Modal into a render() but it does not work too. I used inspect element tool and it shows the div from Modal but show it "grey".
This is the Modal
import React from 'react';
import './Modal.css';
const modal = props =>(
<div className="modal">
<header className="modal__header">
<h1>{props.title}</h1>
</header>
<section className="modal__content">
{props.children}
</section>
<section className="modal__actions">
{props.canCancel && (<button className="btn" onClick={props.onCancel}>Cancel</button>)}
{props.canConfirm &&(<button className="btn" onClick={props.onConfirm}>Confirm</button>)}
</section>
</div>
);
export default modal;
and I´m trying to call the Modal here
import React,{Component} from 'react';
import Modal from '../components/Modal/Modal.js';
import './Investments.css';
class InvestmentsPage extends Component{
render(){
return(
<React.Fragment>
<Modal>
<p>Modal content</p>
</Modal>
<div className="investment-control">
<p>Modal</p>
<button className="btn btnt1" >Crear </button>
</div>
</React.Fragment>);
}
}
export default InvestmentsPage;

Your approach is wrong. I am guessing here your modal is hidden under some other DOM element. You should use ReactDOM.createPortal() for modals, tooltips etc. :
In index.html under the existing div with id='root' create new
div with id='modal';
In your modal Component as listed above import ReactDOM from 'react-dom'
and return
ReactDOM.createPortal(your_JSX_here, document.querySelector('#modal'))

React / Electron Rendering Components Is Failing

First of all I am new to whole React and Electron thing so I am not sure if the thing I am doing is correct. I am trying to separate my components into different JSX files and import them and render them into div tags in my index page for my Electron app. However, I am a bit confused because it "partially" works. I am trying to separate my tab pages. I have one container file which looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPane1'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPane2'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPane3'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPane4'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPane5'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPane6'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPane7'));
}
The content on my index.html page seems like loading fine however when it is rendering my components into the page, it is duplicating "TabPane1" only, the rest is not even there. Literally looks like they are duplicated.
My index.html page
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<div id="viewTabPane1"></div>
<div id="viewTabPane2"></div>
<div id="viewTabPane3"></div>
<div id="viewTabPane4"></div>
<div id="viewTabPane5"></div>
<div id="viewTabPane6"></div>
<div id="viewTabPane7"></div>
</div>
</div>
</div>
</body>
Finally, my component contents (just one of them) looks like following:
'use babel';
import React from 'react';
class TabPane1 extends React.Component {
render(){
return(
<div>
<div className="tab-pane" id="tabPane1">
yada yada blah blah tab content for tabPane1
</div>
</div>
)
}
}
export default TabPane1
If I populate these into divs separately as I stated above, it does populate them but it breaks the tabpage functionality - tab script expects the tab pages to be populated under the "viewTabPagesTest" div directly, rather than having another div under it.
If I do the same thing by targeting viewTabPagesTest directly, it only renders the last element, not all of the tab pages. So that's where I am lost actually.
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPagesTest'));
}
What is the correct way to achieve this - to render my components into a single div at once?
Cheers.

The correct way would be to render your navigation page and then inside your navigation page, render out your tab panes. Ideally you would only call ReactDOM.render once. Something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
window.onload = function(){
// ideally you pick a div and render your whole application rather than bits and pieces of it.
ReactDOM.render(<NavigationLeft />, document.getElementById('left'));
}
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper" id="left">
</div>
</body>
NavigationLeft.jsx
import React from 'react';
import-your-tabs from 'wherever';
export default class NavigationLeft extends React.Component {
render() {
return (
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<TabPane1 />
<TabPane2 />
.
.
.
<TabPane7 />
</div>
</div>
)
}
}
TabPane1.jsx
'use babel';
import React from 'react';
export default class TabPane1 extends React.Component {
render(){
return(
<div className="tab-pane" id="tabPanel1">
yada yada blah blah tab content for tabPane1
</div>
)
}
}

You are repeating yourself. That's unnecessary. Trying creating props inside the tabs and use one component called TabPane. For example by using props you would not have to have so much code that does the same thing. Try something like
class TabPane extends React.Component {
render(){
return(
<div>
<div className="tab-pane">
{this.props.paneText}
</div>
</div>
)
}
}
And then when you are going to use it somewhere else the thing you have to do is simply.
import TabPane from '../Components/TabPanes/TabPane.jsx';
class TabContainer extends React.Component {
render() {
return (
<div>
<TabPane paneText='This my first tabPane' />
<TabPane paneText='Second tabPane' />
</div>
)
}
Then you you have to create an App.jsx and then put all your containers there. When you have done this you can simply write ;
ReactDOM.render(<App />, document.getElementById('viewTabPagesTest'));
It would be good to check the Hierarchies in React.

Develop Reference

JavaScript is the programming language of the Web.

how do i reuse a react component but with different colours? - javascript

Related

cannot export react class

React switching between components or hiding and transitions

React: Fade slideshow not working. How to fix it?

custom modal does not appear react.js

React / Electron Rendering Components Is Failing

Categories

Resources