I'm trying to implement React-Bootstrap to my application and somehow it does not render.
This is the code that I have tried:
import React from 'react';
import { CardGroup, Card, Button, Container, CardImg, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';
export class MovieView extends React.Component {
render() {
const { movie, onBackClick } = this.props;
return (
<Container>
<Row>
<Col>
<CardGroup>
<Card>
<CardImg className="movie-view movie-poster" src={movie.ImagePath} />
<Card.Body>
<Card.Title className="movie-title value">{movie.Title}</Card.Title>
<Card.Text className="movie-description value">{movie.Description}</Card.Text>
</Card.Body>
<Card.Body>
<ListGroup>
<ListGroupItem className="movie-genre">{movie.Genre.Name}</ListGroupItem>
<ListGroupItem className="movie-director">{movie.Director.Name}</ListGroupItem>
</ListGroup>
<Button variant="Primary" onClick={() => { onBackClick(null); }}>
Back
</Button>
</Card.Body>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
);
}
}
If not, try adding this line in your src/index.js or App.js file
import 'bootstrap/dist/css/bootstrap.min.css';
See this documentation
Related
why is it that there are two children with the same key
Im using React and Im trying to make ecommerce website
I dont understand the error of double keys
import React, {useEffect} from 'react'
import { Link, useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, Card} from 'react-bootstrap'
import Message from '../components/Message'
import { addToCart } from '../actions/cartActions'
export default function CartScreen() {
const { id} = useParams()
const { search } = useLocation();
const [searchParams] = useSearchParams();
const dispatch = useDispatch();
const productID = id;
const qty = search ? Number(search.split("=")[1]) : 1;
const cart = useSelector(state => state.cart)
const { cartItems} = cart
console.log('cartItems:', cartItems)
useEffect(() => {
if(productID) {
dispatch(addToCart(productID, qty))
}
}, [dispatch, productID, qty])
return (
<Row>
<Col md={8}>
<h1>Shopping Cart</h1>
{cartItems.length === 0 ? (
<Message variant='info'>
Your cart is empty <Link to='/'>Go Back</Link>
</Message>
) : (
<ListGroup varient='flush'>
{cartItems.map(item => (
<ListGroup.Item key= { item.product }>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} fluid rounded/>
</Col>
<Col md={3}>
<Link to={`/product/${item.product}`}>{item.name}</Link>
</Col>
<Col md={2}>
${item.price}
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
)}
</Col>
<Col md={4}>
</Col>
</Row>
)
}
Im trying to load up the cart images in the CartScreen
and its telling me that there are two children with same key
In React while using the following
<ListGroup.Item key= { uniqueID }>
Every key value has to be unique such that it can identify each item in the list uniquely.
More help from this thread.
key is not unique for the elements rendered, React found two elements with same key. Could you please try modifying the map JSX inside map.
<ListGroup varient='flush'>
{cartItems.map((item, index) => (
<ListGroup.Item key= { `${item.product}i${index}` }>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} fluid rounded/>
</Col>
<Col md={3}>
<Link to={`/product/${item.product}`}>{item.name}</Link>
</Col>
<Col md={2}>
${item.price}
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
Good evening, have a question. I am starting to use react making a project with sponacular api. I have this code:
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import ListGroup from 'react-bootstrap/ListGroup';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import "./CartOrden.css";
const CartOrden =()=>{
const {pedidoVegano, pedidoNoVegano, removeItem } = useContext(CartContext);
let totalPrecio = 0;
let tiempoEspera = 0;
let healthScore = 0;
const sumarTotal =(i)=>{
totalPrecio += i.pricePerServing;
console.log(totalPrecio)
}
const calculoEspera =(i)=>{
tiempoEspera += parseInt(i.readyInMinutes);
console.log(tiempoEspera)
}
const totalHealth = (i)=>{
healthScore += i.healthScore;
console.log(healthScore)
}
return (
<Container>
<div>
<h2>Vegan Menu</h2>
</div>
<Row className='m-3'>
{pedidoVegano.map((i=>{
sumarTotal(i.item)
calculoEspera(i.item)
totalHealth(i.item)
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title className='card-title'>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}))}
</Row>
<div>
<h2>Vegan't Menu</h2>
</div>
<Row className='m-3'>
{pedidoNoVegano.map((i=>{
sumarTotal(i.item)
calculoEspera(i.item)
totalHealth(i.item)
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}))}
</Row>
<Row className='m-3'>
<Card>
<Card.Header as="h5">Current Menu</Card.Header>
<Card.Body>
<Card.Title>Total price: {totalPrecio}</Card.Title>
<Card.Title>Total health score: {healthScore} </Card.Title>
<Card.Title>Total preparation time: {tiempoEspera} minutes </Card.Title>
</Card.Body>
</Card>
</Row>
</Container>
)
}
export default CartOrden;
I wanted to unstructure the previous code, to make it more complex and work with components, as it should.
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import "./CartOrden.css";
const CartOrden =({i})=>{
const { removeItem } = useContext(CartContext);
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title className='card-title'>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}
export default CartOrden;
import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import CartOrden from '../CartOrden/CartOrden';
const ResultOrden =()=>{
const {pedidoVegano, pedidoNoVegano, } = useContext(CartContext);
let totalPrecio = 0;
let tiempoEspera = 0;
let healthScore = 0;
const sumarTotal =(i)=>{
totalPrecio += i.pricePerServing;
console.log(totalPrecio)
}
const calculoEspera =(i)=>{
tiempoEspera += parseInt(i.readyInMinutes);
console.log(tiempoEspera)
}
const totalHealth = (i)=>{
healthScore += i.healthScore;
console.log(healthScore)
}
return (
<Container>
<div>
<h2>Vegan Menu</h2>
</div>
<Row className='m-3'>
{pedidoVegano.map((i=>{
sumarTotal(i)
calculoEspera(i)
totalHealth(i)
return(
<CartOrden i={i} key={i.pricePerServing}/>
)
}))}
</Row>
<div>
<h2>Vegan't Menu</h2>
</div>
<Row className='m-3'>
{pedidoNoVegano.map((i=>{
sumarTotal(i)
calculoEspera(i)
totalHealth(i)
return(
<CartOrden i={i} key={i.id}/>
)
}))}
</Row>
<Row className='m-3'>
<Card>
<Card.Header as="h5">Current Menu</Card.Header>
<Card.Body>
<Card.Title>Total price: {totalPrecio}</Card.Title>
<Card.Title>Total health score: {healthScore} </Card.Title>
<Card.Title>Total preparation time: {tiempoEspera} minutes </Card.Title>
</Card.Body>
</Card>
</Row>
</Container>
)
}
export default ResultOrden;
I wanted to know why in the first case the code works but in the second within ResultOrden, the healthScore, tiempoEspera and totalPrice returns NaN.
example image
Sorry if the question is basic, I was trying to solve it and I couldn't. I'm probably missing something about communication between components but couldn't find it. If anyone can give me some advice, I'd appreciate it.
I think i dont understand sth.
I put every where nano id keys but still get error.
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.
Check the render method of Users.
import React from "react";
import {useQuery} from "#apollo/client"
import { ListGroup, Container, Row, Col,Card } from "react-bootstrap";
import {GET_USERS} from "../Queries/Queries"
import { nanoid } from 'nanoid'
function Users() {
const { loading, error, data}= useQuery(GET_USERS)
if (loading) return <p>Loading...</p>
if (error) return <p>Error</p>
return (
<Container>
{
data && data.users.map(user=>{
return(
<>
<br/>
<Row key={nanoid()}>
<Card key={nanoid()} style={{ width: '6rem' }}>
<Card.Img key={nanoid()} variant="top" src={user.avatar} />
</Card>
<br />
<Col key={nanoid()}>
<ListGroup key={nanoid()}>
<ListGroup.Item key={nanoid()}>Id: {user.id} </ListGroup.Item>
<ListGroup.Item key={nanoid()}>Email: {user.email}</ListGroup.Item>
<ListGroup.Item key={nanoid()}>Username: {user.username}</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</>
)
})
}
</Container>
);
}
export default Users;
The error message is saying that each item it is mapping needs a key so you just need to add one key to the parent container like so
function Users() {
const { loading, error, data}= useQuery(GET_USERS)
if (loading) return <p>Loading...</p>
if (error) return <p>Error</p>
return (
<Container>
{
data && data.users.map((user, index)=>{
return(
<Row key={index}>
<Card style={{ width: '6rem' }}>
<Card.Img variant="top" src={user.avatar} />
</Card>
<br />
<Col>
<ListGroup>
<ListGroup.Item>Id: {user.id} </ListGroup.Item>
<ListGroup.Item>Email: {user.email}</ListGroup.Item>
<ListGroup.Item>Username: {user.username}</ListGroup.Item>
</ListGroup>
</Col>
</Row>
)
})
}
</Container>
);
}
Instead of adding a parent container to what you had already I just remove dthe JSX tags and the BR. You should add a className to that row to get the desired space instead of using BR.
When you map somthing in react, react track nodes with unique keys. e.g
[{id:1,value:'value 1'},{id:2,value:'value 2'}].map((item,index) =>
(<Row key={`row-${item.id}`}>all content goes here.</Row>))
This key={row-${item.id}} should be unique for every looped Item.
I am working on Ant design react in this when I am running in my project then in browser it is showing error like this Unexpected block statement surrounding arrow body; move the returned value immediately after the => arrow-body-style.
I am not able to understand how to solve this error
This is my code App.js
/* eslint-disable eol-last */
import React from "react";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import "./Walkin.css";
const Walkin = () => {
return (
<div className="mainDiv">
<Row>
<Col className="main" span={6}>
<h1 className="hai">Hi</h1>
</Col>
</Row>
</div>
);
};
export default Walkin;
Since the const is returning html only, your code should be as follows
import React from 'react';
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
import './Walkin.css';
const Walkin = () => (
<div className="mainDiv">
<Row>
<Col className="main" span={6}>
<h1 className="hai">Hi</h1>
</Col>
</Row>
</div>
);
export default Walkin;
No need to add { if its only returning html
No need of the curly braces. It is only needed if you want to have a variable or do something before returning the HTML content
const Walkin = () => {
const someVal = getVal();
return <div className="mainDiv">
<Row>
<Col className="main" span={6}>
<h1 className="hai">Hi</h1>
</Col>
</Row>
<p>{someVal}</p>
</div>
};
This should work
const Walkin = () => (
<div className="mainDiv">
<Row>
<Col className="main" span={6}>
<h1 className="hai">Hi</h1>
</Col>
</Row>
</div>
);
Ref:- https://eslint.org/docs/rules/arrow-body-style
I have the following code for a card to that I want to center vertically:
import React from 'react';
import {
Card,
CardHeader,
CardBody,
CardTitle,
Row,
Col,
Container
} from "reactstrap";
const Login = () => {
return(
<Container className="d-flex h-100">
<Row className="justify-content-center align-self-center">
<Col>
<Card>
<CardHeader>
<CardTitle>
Login
</CardTitle>
</CardHeader>
<CardBody>
do something
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
};
export default Login;
However the result is as follows:
Anyone have any ideas why it isn't working?
I think what you want is vh-100 for viewport units. I suspect the containing box of Container is not set to take up the viewport
<Container className="d-flex vh-100">
<Row className="m-auto align-self-center">
<Col>
<Card>
<CardHeader>
<CardTitle>Login</CardTitle>
</CardHeader>
<CardBody>do something</CardBody>
</Card>
</Col>
</Row>
</Container>