I'm working with the Card component of Reactstrap in React.
So what I need is a given image as the background for the card heading and card title. So I refered the documentation and used CardImgOverlay component
Given below is the code snippet
import React, { Component } from 'react'
import { Form, Card, CardTitle, CardText, CardImg, CardImgOverlay, Container, Row, Col } from 'reactstrap'
import './style.css'
class WeatherComponent extends Component{
render(){
return(
<div>
<Container>
<Row>
<Col>
<Card>
<CardImg width="50%" src="assets/images/sunny.jpg" alt="Card image cap" />
<CardImgOverlay>
<CardTitle className='text'>Weather</CardTitle>
<CardText className='text'>Summer</CardText>
</CardImgOverlay>
</Card>
</Col>
</Row>
</Container>
</div>
)}
}
export default WeatherComponent
But the above page is not rendering correctly and what I'm getting is this:
A solution to fix this problem is much appreciated.
import 'bootstrap/dist/css/bootstrap.min.css';
Related
I am new to react,
I am learning react, In this process I tried to create a for componentdidmount forreact. Were I am stuck in the following code
Below is my code
import React from "react";
import {Card, Button, Container, Row, Col} from 'react-bootstrap';
import addquantity from '../Functions/quantityadd.js';
const numberOfCards = 100;
const Home = (props) => {
componentdidMount(){
console.log('First this called');
}
return (
<div>
<h2>Home</h2>
<Container>
<Row xs={3} md={4} lg={6}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col className='mt-5' key={i+1}>
<Card >
{/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
<Card.Body>
<Card.Title tag="h5">Test</Card.Title>
<Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<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 onClick={() =>addquantity(i+1)}>Button</Button>
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container>
</div>
);
}
export default Home;
I need to load the data of the product list. so I am using componentdidmount
Can you help me to understand what I am doing wrong here.
Thanks in advance
first of all this is "componentDidMount"
And in functional components we use "useEffect" for life cycle hooks and
"componentDidMount" is for class components
I'm trying to make a responsive grid system in react.js
I want to show 3 cards in a row. Each card consists of 4 columns.
But I want to make only 1 component which will render my cards and show them on screen. But i'm unable to make the logic of dynamically showing these cards in a row as a row contains only 3 cards. After that next row will start
Here is my card Component code
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
const INNERCARD = (props) => {
return (
<Container>
<Row>
<Col md={3}>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
};
export default INNERCARD;```
I got this working with a little bit of tinkering. Never used reactstrap before, so it was fun to play around with it a bit. First you need to also install bootstrap into your project, not sure if you knew that or not. Then you need to include the bootstrap css file in your index.js file.
So I am using a freshly installed CRA app. The top of my index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
So once you have Bootstrap installed and imported it, then you can play around with reactstrap, assuming that is also installed. I learned from the docs that you want <Row xs={3}> if you want 3 cards per row.
So here is my full App.js file that works with any number of cards and shows 3 per row:
import './App.css';
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
function App() {
// obviously I am just hard-coding in a random number here. This is where
// you would have a call to an API or something where you would get all
// your card data from, ideally that API call would return an array of data
// and then you could just map over that array to output the card data
// down below in the render section
const numberOfCards = 11;
return (
<div className="App">
<Container>
<Row xs={3}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title #{i+1}</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
)
})}
</Row>
</Container>
</div>
);
}
export default App;
Forgot to include what it looks like! Here it is!
//Mapping over the Bootstrap Card and then displaying them in the Grid formate
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap';
// Array of Data
const StudentData = [
{
Name: "Waji",
Degree: "Bachlorrs"
},
{
Name: "Zain",
Degree: "Matric"
},
{
Name: "Rahat",
Degree: "B.Com"
},
{
Name: "Wajahat",
Degree: "Bachlorrs"
},
{
Name: "Sabi",
Degree: "Bachlorrs"
}
]
let NewCard = () => {
return (
<Row>
{StudentData.map((props) => {
return (
<Col sm={6} md={4} className='mt-3'>
<div className="card" style={{ width: '18rem' }}>
<div className="card-body">
<h5 className="h5">{props.Name}</h5>
<p className="card-text">{props.Degree}</p>
Click
</div>
</div>
</Col>
)
})}
</Row>
)
}
export default function MyCard() {
return (
<Container>
<NewCard
title=''
calss=''
/>
</Container>
)
}
ReactDOM.render(
<MyCard />,
document.getElementById('root')
)
Creates the following:
I have a error of Module not found. I think that such error is because of lack of a file or directory .However I have checked more than 30 times at that particular location and even for typos ,I don't think i have any mistake here.
Here is my code for DishdetailComponent.js
import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';
class Dishdetail extends Component{
constructor(props){
super(props);
}
render(){
if(this.props.dish!=null){
return(
<div className="container">
<div className="row">
<div className="col-12 col-md-5 m-1">
<Card>
<CardImg width="100%" object src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
</div>
</div>
)
}
else{
return <div></div>
}
}
}
export default Dishdetail;
I am calling this component from Menucomponent.js file.It has following code:
import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';
import Dishdetail from './Components/DishdetailComponent';
class Menu extends Component{
constructor(props){
super(props);
this.state={
selectedDish:null
};
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 col-md-5 m-1">
<Card onClick={()=>this.onDishSelect(dish)}>
<CardImg width="100%" object src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
{/* {this.renderDish(this.state.selectedDish)} */}
<Dishdetail dish={this.state.selectedDish}/>
</div>
);
}
}
export default Menu;
The hierarchy of my code follows,
-src(folder)
-Components(sub-folder)
-menucomponent.js
-DishdetailComponent.js
The file I want to import to and the file which will recieve are in same folder Components.
Given your folder structure that you have provided, aren't menuComponent and dishDetailComponent in the same folder? perhaps you need to change your import line to
import Dishdetail from './DishdetailComponent';
as that is the relative path to the file from which you are calling the import.
By looking at your folder structure,
Both of the components are in same directory.
Then you will have to import it as
import Dishdetail from "./DishdetailComponent";
To avoid this kind of overhead of importing, you can simplify it by adding a jsconfig.json file at your root directory and configure as below.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This is to specify an absolute import path and now you can import it like
import Dishdetail from "Components/DishdetailComponent";
You have put the MenuComponent and the DishDetail Component in the same folder, so you can do
import Dishdetail from "./DishdetailComponent"
You should use a relative path as both you components are in the same folder and the
./ tells the program to look in the same folder as the current file is in. As you're using ./ in the MenuComponent, which is in the Components folder, ./ looks inside the components folder.
./Components/DishdetailComponent searches Components directory in the folder that MenuComponent is in, and since there is no such directory in that folder, it throws an error.
It seems both files are in the same level
Try using
import Dishdetail from './DishdetailComponent';
I have code like this in index.js in is parents file
import KOD1 from '../../assets/KOD/milktea.png'
import KOD2 from '../../assets/KOD/juice.png'
import KOD3 from '../../assets/KOD/juice1.png'
import KOD4 from '../../assets/KOD/milktea1.png'
class Home extends Component{
render(){
return(
<section className="kind-of-drink">
<h4 className="main-title"> Kind of drinks we sell</h4>
<Row className="kod-content">
<Col className="kod-image">
<ImageItem src={KOD1}/>
</Col>
<Col className="kod-image">
<ImageItem src={KOD2}/>
</Col>
<Col className="kod-image">
<ImageItem src={KOD3}/>
</Col>
<Col className="kod-image">
<ImageItem src={KOD4}/>
</Col>
</Row>
</section>
);
}
}
And this is child file index.js
import React from 'react';
import {Image} from 'react-bootstrap';
import '../Image/index.css';
const ImageItem = ({image}) => {
return(
<Image className="prod-kind-image" src={image}/>
);
}
export default ImageItem;
I don't understand why when I import the image from parents to the child it goes wrong where it doesn't display the image
I don't know where I'm wrong, can you take a bit time to support me about this please, Thank you so much
You are passing image to ImageItem in src props. You need to change the implementation of ImageItem.
import React from 'react';
import {Image} from 'react-bootstrap';
import '../Image/index.css';
const ImageItem = ({src}) => {
return(
<Image className="prod-kind-image" src={src}/>
);
}
export default ImageItem;
I am trying to create a deck of cards using reactstrap. I want the cards to be aligned horizontally but the cards are aligned vertically. Can someone please tell me how achieve this? Thanks
These are the two Components
import React, { Component } from "react";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
Col
} from "reactstrap";`
class MovieItem extends Component {
render() {
return (
<Card>
<CardTitle>Title</CardTitle>
</Card>
);
}
}
export default MovieItem;`
MovieList.js
import { Row, Col, CardDeck, CardGroup, Container } from "reactstrap";
import React, { Component } from "react";`
import MovieItem from "./MovieItem";`
class MoviesList extends Component {
render() {
let movies;
if (this.props.movies) {
movies = this.props.movies.map(movie => {
return <MovieItem key={movie.id} movie={movie} />;
});
}
return (
<Container fluid>
<CardDeck> {movies}</CardDeck>
</Container>
);
}
}
export default MoviesList;
As Bootstrap and Reactstrap Card said, you can integrate them like this :
<Row>
<Col>
<Card>
<Row className="no-gutters">
<Col md="4">
<CardImg
top
width="100%"
src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"
alt="Card image cap"
/>
</Col>
<Col md="8">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Col>
</Row>
</Card>
</Col>
</Row>
I have encountered the same problem. The basic solution is to put your group of cards inside a Row Component. This is a snippet from my code.
<Container fluid>
<Row>
<ClassroomCard/>
<ClassroomCard/>
<ClassroomCard/>
</Row>
<Row>
<ClassroomCard/>
<ClassroomCard/>
<ClassroomCard/>
</Row>
</Container>
Later, it's up to you to change the style of your elements accordingly. I hope this will help those who will encounter this problem in the future.