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;
Related
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 am trying to fetch data from a json file called tmp.json that is present in the root of public folder. My app was created using CRA. Here's the code that I wrote for it:-
import React, { useState } from "react";
import Button from "../components/button";
import { Container, Row, Carousel, Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "../components/Header.js";
import Footer from "../components/Footer.js";
import Card from "../components/card";
import axios from "axios";
const Commit = () => {
let [fileList, setFileList] = useState([]);
axios.get("tmp.json").then((res) => {
setFileList((fileList = res.data));
});
return (
<>
<Header />
<Container>
<Row>
<Col lg={"12"}>
<Carousel indicators={false}>
{fileList.map((file, idx) => {
return (
<Carousel.Item key={idx}>
<Card
key={idx}
heading={file.path.split("\\").pop()}
content={file.changes}
/>
</Carousel.Item>
);
})}
</Carousel>
</Col>
</Row>
</Container>
<Footer />
</>
);
};
export default Commit;
This works absolutely fine before build but after build this doesn't work. It simply cannot resolve the promise. Although the json file is present in the build folder but I simply cannot fetch it. Any help would save me a ton of time
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';
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.
I am attempting to build the correct react project structure to use to build a temperature converter.
problem - I keep getting the following error each time I attempt to render JSx via a class component:
Error: Element ref was specified as a string (container) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
How do I correct this issue?
Tree structure for the configuration and source directory:
configuration
├── index.html
├── main.css
└── main.js
source
├── InteractiveModel.js
├── components
│ └── CelsiusComponent.js
├── css
│ └── main.css
├── index.html
└── index.js
The sets of code that I think is causing the error are :
CelsiusComponent.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import TextField from 'material-ui/TextField';
import {Container, Row, Col} from 'react-grid-system';
import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';
const style = {
margin: 12,
};
class CelsiusComponent extends Component {
constructor(props) {
super(props)
// Set initial state
this.state = {InputUser:''};
}
ManageMutation(event) {
const InputUser = event.target.value;
this.setState({InputUser})
}
resetInputField() {
this.setState({InputUser:''})
}
render() {
const InputUser = this.state.InputUser;
let result;
if (!InputUser) {
result=''
} else {
result =(InputUser-32)*5/9
}
const MaterialInterface =
<MuiThemeProvider>
<Container>
<Row>
<Col sm={4}>
<h3>
Enter Temperature in Fahrenheit
</h3>
</Col>
</Row>
<Row>
<Col sm={4}>
<TextField
type='text'
floatingLabelText="Enter Number "
value =
{this.state.InputUser}
onInput =
{ this.ManageMutation = this.ManageMutation.bind(this)}
/>
</Col>
</Row>
<Row>
<Col sm={4}>
<p>Temperature in Celsius</p>
</Col>
</Row>
<Row>
<Col sm={4}>
<p>{result}</p>
</Col>
</Row>
<Row>
<Col sm={4}>
{/* <RaisedButton
label=" Default "/> */}
<RaisedButton onClick =
{this.resetInputField=this.resetInputField.bind(this)} label="Delete" style={style} />
</Col>
</Row>
</Container>
</MuiThemeProvider>
return MaterialInterface
}
}
export default CelsiusComponent;
InteractiveModel.js
import React from "react";
import { render } from 'react-dom';
import CelsiusComponent from './components/CelsiusComponent';
class InteractiveModel extends React.Component {
render() {
return (
<div className='iteractive-model'>
<CelsiusComponent />
</div>
);
}
};
export default InteractiveModel;
index.js
import React from 'react';
import { render } from 'react-dom';
import style from "./css/main.css";
import InteractiveModel from "./InteractiveModel";
render(<InteractiveModel />, document.getElementById("app"));