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'))
Related
When I started the project, I never thought of adding a cart, but now I want to.
Let me tell you the structure,
I have a jsx called Pricetag.jsx in which I have defined how my card will look like it has name, image, and add to cart.
Here is my Pricetag.jsx
import React from 'react'
import './Body.css'
// import './Cart.js'
import { useState } from 'react'
export default function Pricetag(props) {
const [count, setCartCount] = useState([]);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
And this is the Birthday.jsx where I have used Pricetag information using props,
import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
export default function Cakebody(props) {
return (
<>
<Link to='/' className="menulink con112 ">
<div className='name1' >Back to home page</div>
</Link>
<div className="headingbody">
{props.title}
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
</div> </>
)
}
Now first I tried my self, then after watching some tutorials I noticed that they all are using objects to store data -> id, name, price, and all but, is there any way I can do it without it.
I want to some how grab the name and image of the cake from the birthday.jsx and want to send it to a new cart.jsx.
In fact JS is an object, everything in JS is kind of an object
if you find way to do something is JS without using object let me know
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";
I have a small issue using the React modals from Bootstrap in my app.
In index.hmtl, I import this:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css">
However, it applies the CSS to absolutely everything in my app. I don't want this since it breaks the whole style. I can't really custom all the classes from Bootstrap in my component, so I would need to find a way to only apply these styles to my component that is the modal.
Here is my modal:
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
);
}
export default PicturesUploadModal;
So, how can I make sure the the styles imported sooner are ONLY applied to the Modal component?
Thanks!
I suggest you use this awesome library since it's just the modal you are implementing:
react-modal will solve your issue, that way bootstrap doesn't mess your styles. Here is the link for the npm package: https://www.npmjs.com/package/react-modal
Try to add a class and write css ontop this
<Modal show={props.modalOpen} onHide={props.handleClose} className: 'your-class'>
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components'; // Import this
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
const Styles = styled.div`
.yourclassName{
margin: 2px;
}
`
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Styles>
<div className="yourclassName">Modal</div>
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
</Styles>
);
}
export default PicturesUploadModal;
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.
Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;