Template Literals in React for bootstrap and css modules - javascript

Hi I want to use bootstrap and css modules together in react but I am having trouble understanding how. I thought I could use template literals to achieve this purpose.
Here is the code below:
Login.tsx
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles.background-color-main} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
This gives me an error in the className, can anyone show me how I am supposed to properly use bootstrap and my own custom css modules together?
My Login.module.css is here:
.background-color-main {
background-color: #87BFFF;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}

The problem here is in property name background-color-main since you have used - casing. you should access the property by LoginStyles["background-color-main"].
Here is the corrected code
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles["background-color-main"]} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
I've update the same working code here codesandbox

Related

How to pass CSS from CSS module as prop in Next.js

I am trying to apply CSS on a component called Cards. I want to apply the CSS on the #image_div div. My code is as follows:
team.module.css:
.grid_container{
display: grid;
grid-template-columns: repeat(3,auto);
}
.image #image_div{
border-radius:100%;
margin: 30vh;
}
index.js:
import Image from "next/image";
import Div from "../../components/Div";
import Cards from "../../components/Cards";
import styles from "../../styles/team.module.css";
import xyz from "../../public/xyz.jpeg"
export default function Team(){
return (
<Div>
<div className={`${styles.grid_container}`}>
<Cards url={xyz} title={"XYZ"} className={styles.image}></Cards>
</div>
</Div>
);
}
Cards.js:
import Image from "next/image";
import { Card } from "react-bootstrap";
import styles from "../styles/components/Card.module.css";
export default function Cards({title,url,width,height,alt,description,className}) {
return (
<Card className={`card col-xs-12 col-sm-4 ${styles.Card} ${className?className:null}`}>
<div className="d-flex justify-content-center" id="image_div">
<Image
variant="top"
src={url}
width={width}
height={height}
alt={alt}
className="img-card"
/>
</div>
<Card.Body className="card-content">
<Card.Title className="card-title text-center">{title}</Card.Title>
<Card.Text className="text-center">{description}</Card.Text>
</Card.Body>
</Card>
);
}
But when I inspected the #image_div the CSS is not applied to it. What am I doing wrong here? I want to apply the CSS defined in the team.module.css without defining the same CSS in the Card.module.css file (which contains CSS for Cards.js).
Just like the class selectors, the #image_div selector also gets namespaced by CSS Modules.
You have to use :global() on the selector to switch to global scope and properly target #image_div.
.image :global(#image_div) {
border-radius:100%;
margin: 30vh;
}

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest
It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

Page not showing in React.js

I am trying to build a landing page based on React.js but after everything I did with react.js bootstrap the page is not showing but only showing as the original default react page;
here's the App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
ReactDOM.render(<App />, document.getElementById('root'));
const Example = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default Example;[enter image description here][1]
serviceWorker.unregister();
I was wondering is there some file that i missed to import or export since i am new to React.js, please help thanks!
so you are rendering the original App to the page: ReactDOM.render(<App />, document.getElementById('root'));
If you customise the App file rather than in the index, e.g.
function App() { = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default App;
It should then be rendered on the page.
I can see from your code that your App Component will render to the DOM.
Are you also looking for your Example component ??
Then you need to first include your Example Component somewhere into APP Component itself (Import Example in app.js) and then render your App component to DOM in index.js
hey you are rendering the app component
here this line is doing that ReactDOM.render(<App />, document.getElementById('root'));
if you want to render Example component ,you need to put it inside App.js file like below
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
function App() {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>``
</Card>
);
}
export default App;
add export default App in bottom answer updated
Desired result can be achieved like this:
App component:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
const App = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
ReactDOM.render(<App />, document.getElementById('root'));
export default Example;
// [enter image description here][1]
serviceWorker.unregister();
If there is no error on your terminal, check your index.css. Most probably the global styling has blurred out the rendered elements.

How to fix when React JS Pagination component does Nothing on Click?

Im using react js Pagination component and wrote the code as mentioned in documentation but it does nothing onClick.
import Pagination from "react-js-pagination"
and here i use it:
{this.state.spareParts.map((part, index) =>
<Col md="3" lg="3" sm="6" xs="6" xl="3">
<Card>
<h4>
<b> {part.Name} </b>
</h4>
<h4> Rs. {part.Price} </h4>
<h5> By: {part.CompanyName} </h5>
</Card>
</Col>
)}
<Pagination
data={this.state.spareParts}
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={50}
pageRangeDisplayed={5}
onChange={this.handlePageChange} />
and here is handlePageChange function:
handlePageChange(pageNumber)
{
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
Can someone tell me what Im doing wrong here becoz of which Im getting no results on click on pagination bar.
It's working for me. Can you try below code.
Why do you need to send data(spareParts) as the component doesn't take data as prop.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Happy Coding!!!
For someone who looking for solutions in 2022
// Try to add event.stopPropagation();
<a className={`page-link ${page == props.currentPage ? 'isDisabled-link' : ''}`} href="#"
onClick={(event) => { event.stopPropagation(); props.pageChanged(page) }}
>
{page}
</a>

why react-bootstrap is not adding styles to my grid layout

I am making promodoro clock .I wrote my code using react-bootstrap .it is working but the styles of default classes of bootstrap is not being added to the styles.it is just being stacked over one another.
import React, { Component } from "react";
import "./App.css";
import Grid from "react-bootstrap/lib/Grid";
import Row from "react-bootstrap/lib/Row";
import Col from "react-bootstrap/lib/Col";
class App extends Component {
render() {
return (
<div className="App">
<Grid className="main-container">
<h1>Promodoro Clock</h1>
<Row className="time-setters ">
<Col className="Session-time text-center" sm={6}>
<div>Session time</div>
+
<span>25</span>
-
</Col>
<Col className="Break-time text-center" sm={6}>
<div>Break time</div>
+
<span>5</span>
-
</Col>
</Row>
</Grid>
</div>
);
}
}
.App {
text-align: center;
}
html {
height: 100%;
}
body {
height: 100%;
}
.main-container {
max-width: 800px;
margin: 0 auto;
}
Because you didn't import the css file:
import 'bootstrap/dist/css/bootstrap.min.css'
Install bootstrap before npm install bootstrap --save
If you are going to import multiple things at once, you might want to use this:
import { Grid, Row, Col } from 'react-bootstrap';
Also, make sure you import the stylesheet somewhere on your page, like it says on the docs:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Categories